上拉加载和下拉刷新是小程序开发的常见需求。本文将介绍如何在微信小程序中实现上拉加载和下拉刷新的功能，为用户带来更加流畅、便捷的使用体验。
1. 实现效果
微信小程序 上列表拉加载下拉刷新
2. 实现思路
(1) 首先需要在使用到的 json 文件下配置 “enablePullDownRefresh”: true
{
"usingComponents": {
},
"enablePullDownRefresh": true,
}
(2) 在 js 文件中加上触底函数跟上拉函数
//触底函数
onReachBottom(){
console.log("上拉加载....");
},
//上拉函数
onPullDownRefresh(){
console.log("下拉刷新...");
},
(3) 请求接口，将新请求的数据通过 cancat 方法合并到 list 数组中，然后更新数据。 concat() 方法用于连接两个或多个数组
var dataList = that.data.dataList.concat(dataArr)
that.setData({
dataList: dataList
});
（4）对数据进行判断，如果列表数据条数小于总条数，隐藏 “正在加载” 字样，显示 “已加载全部” 字样
if (res.data.dataList.length < this.data.limit) {
that.setData({
loading: false,
loaded: true,
});
}
(5) 上拉加载时，改变文字状态，然后调用接口
let that = this;
if (!that.data.loading) {
that.setData({
loading: true,
loaded: false
});
}
setTimeout(function () {
that.getData();
}, 500)
（6）下拉刷新时，将页码重置为 1 然后再次调用接口即可，但是不要忘了刷新完成后要关闭刷新的操作：wx.hideNavigationBarLoading() 和 wx.stopPullDownRefresh() 。
this.data.list = []
wx.showNavigationBarLoading()
this.setData({
page: 1
});
this.licensePort();
setTimeout(function () {
wx.showToast({
title: '刷新成功',
icon: 'none',
duration: 1000
})
wx.hideNavigationBarLoading()
wx.stopPullDownRefresh()
}, 1000)
3. 完整代码
3.1. wxml
<!-- 内容 -->
<view class="navBox" wx:for="{
{dataList}}" wx:key="index">
<view>
<text class="lableBox">区县</text><text>{
{
item}}</text>
</view>
</view>
<!-- 加载时文字 -->
<view class="bomTxt">
<view hidden="{
{!loading}}">正在加载...</view>
<view hidden="{
{!loaded}}">已加载全部</view>
</view>
3.2. wxss
page {
background: #EFF4FF;
}
.navBox {
margin: 2.5%;
font-size: 14px;
border-radius: 36rpx;
background: white;
}
.lableBox {
display: inline-block;
width: 90px;
text-align: right;
margin-right: 30rpx;
}
.navBox view {
padding: 24rpx 30rpx;
}
.navBox view:not(:last-child) {
border-bottom: 1px solid rgb(235, 237, 239);
}
.bomTxt {
display: flex;
justify-content: center;
font-size: 12px;
color: rgb(126, 138, 155);
padding: 0rpx 0rpx 20rpx 0rpx;
}
3.3. json
{
"usingComponents": {
},
"navigationBarBackgroundColor": "#6197FB",
"navigationBarTitleText": "列表刷新加载",
"enablePullDownRefresh": true,
"backgroundTextStyle": "light",
"backgroundColor": "#6197FB"
}
3.4. js
//获取应用实例
var app = getApp();
Page({
data: {
pageNum: 1, //当前第几页
pageSize: 20, //一页展示几条
dataList: [], //所有数据
loading: false, //是否展示 “正在加载” 字样
loaded: false //是否展示 “已加载全部” 字样
},
onLoad: function (options) {
var that=this
that.getData(1, 20, 1);
},
/**
* 获取数据
*/
getData(pageNum, pageSize, type) {
var that = this;
if (type == 1) {
//刷新
that.setData({
pageNum: 1,
pageSize: pageSize,
dataList: [],
});
setTimeout(function () {
var dataArr = []
for (var i = 0; i < pageSize; i++) {
dataArr.push(that.data.pageNum + '内容' + i);
}
var dataList = that.data.dataList.concat(dataArr)
that.setData({
dataList: dataList
});
wx.showToast({
title: '刷新成功',
icon: 'none',
duration: 1000
})
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
if (dataList.length>0) {
// 更新数据
that.setData({
dataList: dataList,
loading: false,
});
} else {
that.setData({
loaded: true, //显示 “没有数据” 字样
loading: false //隐藏 “正在加载” 字样
});
}
}, 2000);
} else if (type == 2) {
//加载
if (pageNum > 3) {
wx.showToast({
title: '没有更多了',
icon: 'success',
duration: 1000
})
} else {
wx.showLoading({
title: '加载中...',
});
setTimeout(function () {
for (var i = 0; i < pageSize; i++) {
that.data.dataList.push( '内容' + i);
}
that.setData({
pageNum: pageNum,
dataList: that.data.dataList
});
wx.hideLoading();
}, 2000);
}
}
},
/**
* 上拉加载
*/
onReachBottom() {
const that = this;
if (!that.data.loading) {
that.setData({
loading: true, //加载中
loaded: false //是否加载完所有数据
});
}
var pageNums = that.data.pageNum + 1;
this.getData(pageNums, 20, 2);
},
/**
* 下拉刷新
*/
onPullDownRefresh() {
var that=this
wx.showNavigationBarLoading() //在标题栏中显示加载圈圈
that.getData(1, 20, 1);
}
})