欢迎访问 如意编程网!

如意编程网

当前位置: 首页 > 编程资源 > 编程问答 >内容正文

编程问答

【微信小程序】-—下拉刷新、上拉触底事件详细讲解

发布时间:2024/5/15 编程问答 1 豆豆
如意编程网 收集整理的这篇文章主要介绍了 【微信小程序】-—下拉刷新、上拉触底事件详细讲解 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1.页面事件–下拉刷新事件

1.1什么是下拉刷新

下拉式移动端的专有名词,指的是通过手指子在屏幕上的下拉滑动操作,从而重新加载页面数据

2.启动下拉刷新

(1)方法一:全局开启下拉刷新

在app.json的window节点中,将enablePullDownRefresh设置为true

{"pages": ["pages/switch/switch","pages/navigator/navigator","pages/test/test","pages/tabBar/tabBar","pages/index/index"],"window": {"enablePullDownRefresh": true} }

(2)方法二:局部开启下拉刷新
在页面的.json配置文件中,将enablePullDownRefresh设置为true

{"usingComponents": {},"enablePullDownRefresh": true }

在实际开发中,推荐使用第二种方式,为需要的页面单独开启下拉刷新效果。

3.配置下拉刷新窗口的样式

在全局或者页面的.json配置文件中,通过backgroundColor和backgroundTextStyle来配置下拉刷新窗口的样式,其中:

backgroundColor用来配置下拉刷新窗口的背景颜色,仅支持16进制的颜色值

backgroundTextStyle用来配置下拉刷新loading的样式,仅支持dark和light

{"pages": ["pages/switch/switch","pages/navigator/navigator","pages/test/test","pages/tabBar/tabBar","pages/index/index"],"window": {"backgroundTextStyle": "dark","backgroundColor":"#bfa","enablePullDownRefresh": true}, }

4.监听页面的下拉刷新事件

在页面的.js文件中,通过onPullDownRefresh()函数可以监听当前页面的下拉刷新是事件。(下拉刷新页面的时候触发该函数的调用)

例如:在页面的wxml中有如下的ui结构,点击按钮可以让count值自增+1,刷新页面将count重置为0

在.wxml中

<view >{{count}}</view> <button bindtap="handler">点我+1</button>

在.js中

data: {count:0},handler(){this.setData({count:this.data.count+1})}, onPullDownRefresh() {//console.log("111");//当页面刷新会被触发this.setData({count:0})},

5.停止下拉刷新的效果

当处理完下拉刷新后,下拉刷新的loading效果会一直显示,不会主动消失,所以需要手动停止loading的效果。此时,调用wx.stopPullRefresh()可以停止当前页面的下拉刷新。
在.wxml中

<view >{{count}}</view> <button bindtap="handler">点我+1</button>

在.js中

data: {count:0},handler(){this.setData({count:this.data.count+1})}, onPullDownRefresh() {this.setData({count:0}),wx.stopPullDownRefresh();},

2.页面事件–上拉触底事件

2.1什么是上拉触底

上拉触底是移动端地专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为

2.2监听页面的上拉触底事件

在页面的.js文件中,通过onReachBottom()函数即可监听当前的上拉触底事件

在.js中

onReachBottom() {console.log('触发了上拉触底事件');},

当wxml的数据够多的时候,当向上滑动触到底的时候,就会触发该方法

2.3配置上拉触底距离

上拉触底指的是触发触底事件,滚动条距离页面底部的距离。

可以在全局或者页面的.json配置文件中,通过onReachBottomDistance属性来配置上拉触底的距离

小程序默认的触底距离是50px,在实际开发中,可以根据自己的需求修改这个默认值。

{"onReachBottomDistance": 10 }

2.3配置上拉触底案例

2.3.1

定义获取随机颜色的方法

在页面加载时获取初始值

渲染ui结构并美化页面效果

在上拉触底时调用获取随机颜色的方法

添加loading提示效果

对上拉触底进行节流处理

总结

以上是如意编程网为你收集整理的【微信小程序】-—下拉刷新、上拉触底事件详细讲解的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错,欢迎将如意编程网推荐给好友。