一、页面自带下拉刷新
在微信小程序中，页面自带下拉刷新功能。只需要在需要刷新的页面的json文件中开启enablePullDownRefresh属性即可。
代码示例:
<!-- xxx.json -->
{
"navigationBarTitleText": "xxx",
"enablePullDownRefresh": true
}在wxml文件中，需要为页面滚动区域的最外层添加scroll-view标签，并添加bindscrolltolower和bindscrolltoupper两个事件监听函数。
代码示例：
<!-- xxx.wxml -->
<scroll-view scroll-y="true" bindscrolltolower="handleScrollLower" bindscrolltoupper="handleScrollUpper">
<!-- 页面内的元素 -->
</scroll-view>在对应的js文件中，编写处理下拉刷新的函数，其中需要调用wx.stopPullDownRefresh()来停止刷新。
代码示例：
// xxx.js
Page({
handleScrollUpper() {
wx.startPullDownRefresh({
success: () => {
setTimeout(() => {
wx.stopPullDownRefresh();
}, 2000);
}
})
}
})以上代码实现了用户下拉刷新页面时，调用handleScrollUpper函数，同时自动调用页面刷新功能。
注意：刷新完成后，需调用wx.stopPullDownRefresh()手动停止刷新，否则刷新图标会一直存在。
二、手动刷新页面
有时页面自带的下拉刷新无法满足需求，需要手动实现页面刷新功能。可以在页面的wxml中定义一个按钮，然后在对应的js文件中为按钮添加点击事件，通过js代码实现页面的局部更新。代码示例：
<!-- xxx.wxml -->
<button bindtap="refresh">点击刷新</button>// xxx.js
Page({
data: {
list: ["数据1", "数据2", "数据3"]
},
refresh() {
// 模拟请求数据
setTimeout(() => {
this.setData({
list: ["数据4", "数据5", "数据6"]
})
}, 2000)
}
})以上代码模拟了一个数据请求，请求完成后，通过this.setData方法更新list数据，从而实现局部刷新的目的。
三、使用第三方组件实现页面刷新
在微信小程序的官方组件库中，目前并没有现成的下拉刷新组件，但可以使用第三方组件实现。
以weui-miniprogram组件库为例，该组件库中提供了loadmore和loadmore-line两个组件可以实现下拉刷新功能。代码示例：
// xxx.json
{
"navigationBarTitleText": "xxx",
"usingComponents": {
"load-more": "/miniprogram_npm/weui-miniprogram/loadmore/loadmore"
}
}<!-- xxx.wxml -->
<load-more loading="{{loading}}" loading-text="正在加载数据...">
<!-- 列表的数据 -->
<view wx:for="{{list}}" wx:key="index">{{item}}</view>
</load-more>// xxx.js
Page({
data: {
list: ["数据1", "数据2", "数据3"],
loading: false
},
onLoad() {
// 模拟请求数据
setTimeout(() => {
this.setData({
list: ["数据1", "数据2", "数据3"],
loading: false
})
}, 2000)
},
handleLoadMore() {
this.setData({
loading: true
});
// 模拟请求数据
setTimeout(() => {
this.setData({
list: ["数据1", "数据2", "数据3", "数据4", "数据5", "数据6"],
loading: false
})
}, 2000)
}
})以上代码中，通过在json文件中加入usingComponents字段，引入了weui-miniprogram组件库中的loadmore组件。
在wxml文件中，使用loadmore组件包裹需要刷新的区域，同时填写loading和loading-text属性，表示加载状态。
在对应的js文件中，需要在Page函数中声明组件库中的组件，同时编写handleLoadMore函数，响应组件的刷新事件，并通过this.setData方法更新list数据，实现页面刷新。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/301096.html
微信扫一扫 
支付宝扫一扫 