【微信小程序】下拉刷新、上拉加载 实现记录
一、下拉刷新1、下拉刷新:由于小程序数据是实时渲染的。我们把data{}内的数据清空重新加载即可实现下拉刷新2、页面配置:允许页面进行下拉刷新动作:{"enablePullDownRefresh": true}3、使用的page属性:onPullDownRefresh: Function(){} 页面相关事件处理函数–监听用户下拉动作4、实现示例://刷新onRefresh(){//在当前页面显示
·
一、下拉刷新
1、下拉刷新:由于小程序数据是实时渲染的。我们把data{}内的数据清空重新加载即可实现下拉刷新
2、页面配置:允许页面进行下拉刷新动作:
{
"enablePullDownRefresh": true
}
3、使用的page属性:onPullDownRefresh: Function(){} 页面相关事件处理函数–监听用户下拉动作
4、实现示例:
//刷新
onRefresh(){
//在当前页面显示导航条加载动画
wx.showNavigationBarLoading();
//显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
wx.showLoading({
title: '刷新中...',
})
this.getData();
},
//网络请求,获取数据
getData(){
wx.request({
url: '',
//网络请求执行完后将执行的动作
complete(res){
//隐藏loading 提示框
wx.hideLoading();
//隐藏导航条加载动画
wx.hideNavigationBarLoading();
//停止下拉刷新
wx.stopPullDownRefresh();
}
})
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
//调用刷新时将执行的方法
this.onRefresh();
}
二、上拉加载
1、上拉加载更多(页面上拉触底事件):新获取的数据追加到data{}内的原数据即可。由于小程序数据是实时渲染,小程序在保持原数据显示不变的基础上,自动追加渲染显示新数据。
2、使用的page属性:onReachBottom: Function(){} 页面上拉触底事件的处理函数
3、实现示例:列表分页加载
<view class="list" wx:for="{{dataList}}" wx:key="*this" >
<view>编号: {{item.number}}</view>
<view>位置: {{item.location}}</view>
</view>
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
page:1,
pageSize:20,
totalRows:0,
dataList: []
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
this.getDataList()
},
getDataList: function() {
var that = this;
wx.showToast({
icon: 'loading',
duration: 30000,
mask: true
});
const {
page,
pageSize,
dataList
} = that.data;
let param = {
page,
pageSize
}
wx.request({
url: app.sr_api.getMonthTaskList,
header: app.getHead(),
data: param,
method: 'POST',
success: function(res) {
if (res.errMsg !== 'request:ok') {
that.upFail(res.errMsg)
}
if (res.data.status != 200) {
that.upFail(res.data.message)
}
if (res.data.status == 200) {
wx.hideToast({
success: (res) => {},
})
that.setData({
dataList: [...dataList,...res.data.data.result],
totalRows: res.data.data.totalRows
})
}
},
fail: function(res) {
wx.showToast({
title: '获取失败',
icon: 'error',
mask: true
});
}
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
let {
page = 1, totalRows = 0,
dataList = [],
} = this.data;
// 判断数据是否加载完毕
if (dataList.length < totalRows) {
++page;
this.setData({
page
})
this.getMonthTaskList();
}
}
})
更多推荐



所有评论(0)