1.wxml文件
<view wx:for="{{list}}" wx:key="key">
<view>这里是你循环的数据</viwe>
</view>
<view class="bomTxt">
<view hidden="{{!loading}}">正在加载...</view>
<view hidden="{{!loaded}}">已加载全部</view>
</view>
2.js文件
wx.showNavigationBarLoading() //在标题栏中显示加载
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)
}
})
}
})
3wxss文件
page {
background: #EFF4FF;
}
.bomTxt {
display: flex;
justify-content: center;
font-size: 12px;
color: rgb(126, 138, 155);
padding: 0rpx 0rpx 20rpx 0rpx;
}