上拉加载和下拉刷新是小程序开发的常见需求。本文将介绍如何在微信小程序中实现上拉加载和下拉刷新的功能，为用户带来更加流畅、便捷的使用体验。

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=thisthat.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=thiswx.showNavigationBarLoading() //在标题栏中显示加载圈圈that.getData(1, 20, 1);}
})