前言
去年有出过一篇关于 vue 实现上拉加载下拉刷新的功能，最近微信小程序中也用到了这个功能，下面一起来看看微信小程序中是怎么实现这个小功能的吧。
实现效果如下：
实现思路：
1. 首先需要在使用到的
json文件下配置"enablePullDownRefresh": true
{
"usingComponents": {},
"enablePullDownRefresh": true,
}
2. 在
js文件中加上触底函数跟上拉函数
//触底函数
onReachBottom(){
console.log("上拉加载....");
},
//上拉函数
onPullDownRefresh(){
console.log("下拉刷新...");
},
3. 请求接口，将新请求的数据通过
cancat方法合并到list数组中，然后更新数据
注： concat() 方法用于连接两个或多个数组
this.data.page++;
let list = that.data.list.concat(res.data.data.rows)
that.setData({
list: list,
loading: false,
});
4. 对数据进行判断，如果列表数据条数小于总条数，隐藏 “正在加载” 字样，显示 “已加载全部” 字样
if (res.data.data.rows.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.licensePort();
}, 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)
其他你可能关注的配置：
json文件中：
1. backgroundTextStyle: light // 刷新时三个点的颜色，只能是
light或者dark
2. backgroundColor: #FC1944 // 刷新时背景的颜色
js文件中：
3.wx.showNavigationBarLoading() // 在标题栏中显示加载
各文件完整代码如下：
wxml文件
<!-- 内容 -->
<view class="navBox" wx:for="{{list}}" wx:key="index">
<view><text class="lableBox">区县</text>
<text wx:if="{{item.dqbm == '610101'}}">市辖区</text>
<text wx:if="{{item.dqbm == '610102'}}">新城区</text>
</view>
<view><text class="lableBox">企业名称</text> <text>{{item.qymc}}</text>
</view>
<view><text class="lableBox">道闸数量</text> <text>{{item.dzs}}</text></view>
<view><text class="lableBox">行业类型</text>
<text wx:if="{{item.hylb == '01'}}">长流程联合钢铁</text>
<text wx:if="{{item.hylb == '02'}}">短流程钢铁</text>
<text wx:if="{{item.hylb == '03'}}">铁合金</text>
<text wx:if="{{item.hylb == '04'}}">焦化</text>
</view>
<view><text class="lableBox">联系人</text> <text>{{item.lxr}}</text></view>
<view><text class="lableBox">电话</text> <text>{{item.lxdh}}</text></view>
<view><text class="lableBox">地址</text> <text>{{item.qydz}}</text></view>
</view>
<!-- 加载时文字 -->
<view class="bomTxt">
<view hidden="{{!loading}}">正在加载...</view>
<view hidden="{{!loaded}}">已加载全部</view>
</view>
js文件
//获取应用实例
var app = getApp();
Page({
data: {
page: 1, //当前第几页
limit: 3, //一页展示几条
list: [], //所有数据
loading: false, //是否展示 “正在加载” 字样
loaded: false //是否展示 “已加载全部” 字样
},
//生命周期函数--监听页面加载
onLoad: function (options) {
this.informPort(); //调用接口方法
},
// 企业信息接口
informPort() {
var that = this; // //防止this指向问题
// 后台需要的参数
app.http.informPort({
qymc: "",
page: this.data.page,
limit: this.data.limit,
}).then(res => {
if (res.data.code == '10000') {
if (res.data.data.records && res.data.data.records.length > 0) {
// console.log("请求成功", res.data.data.records)
this.data.page++;
//新请求的数据通过cancat方法合并到list数组中
let list = that.data.list.concat(res.data.data.records)
// 更新数据
that.setData({
list: list,
loading: false,
});
//如果列表数据条数小于总条数，隐藏 “正在加载” 字样，显示 “已加载全部” 字样
if (res.data.data.records.length < this.data.limit) {
that.setData({
loading: false,
loaded: true,
});
}
} else {
that.setData({
loaded: true, //显示 “没有数据” 字样
loading: false //隐藏 “正在加载” 字样
});
}
}
})
},
// 触底函数---上拉加载
onReachBottom() {
let that = this; //防止this指向问题
if (!that.data.loading) {
that.setData({
loading: true, //加载中
loaded: false //是否加载完所有数据
});
}
//延时调用接口
setTimeout(function () {
that.informPort();
}, 500)
},
// 上拉函数---下拉刷新
onPullDownRefresh() {
this.data.list = []
wx.showNavigationBarLoading() //在标题栏中显示加载圈圈
this.setData({
page: 1
}); //重置页码
app.http.informPort().then(res => {
if (res.data.code == '10000') {
setTimeout(function () {
wx.showToast({
title: '刷新成功',
icon: 'none',
duration: 1000
})
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
}, 1000)
} else if (res.data.code != 10000) {
setTimeout(function () {
wx.showToast({
title: '刷新失败',
icon: 'none',
duration: 1000
})
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
}, 1000)
}
})
}
})
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;
}
json文件
{
"usingComponents": {},
"navigationBarBackgroundColor": "#6197FB",
"navigationBarTitleText": "企业信息",
"enablePullDownRefresh": true,
"backgroundTextStyle": "light",
"backgroundColor": "#6197FB"
}
