后端返回的数据和PC端分页时返回数据相同。
//底部正在加载样式
<view class="weui-loadmore" wx-if="{{isHideLoadMore}}">
<view class="weui-loading"></view>
<view class="weui-loadmore__tips">正在加载</view>
</view>
//css
/* 正在加载样式 */
.weui-loading {
margin: 0 5px;
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
-webkit-animation: weuiLoading 1s steps(12, end) infinite;
animation: weuiLoading 1s steps(12, end) infinite;
background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
background-size: 100%;
}
.weui-loadmore {
width: 65%;
margin: 1.5em auto;
line-height: 1.6em;
font-size: 14px;
text-align: center;
}
.weui-loadmore__tips {
display: inline-block;
vertical-align: middle;
color: #a3a1a2;
}
Page({
data: {
list: [], //数据列表
pageNum:1, //当前页码
pageSize:10, //每页显示多少条
hasMoreData:true, //上拉时是否继续请求数据,即是否还有更多数据
isHideLoadMore:true, //底部加载更多是否显示
pages:null, //后端返回的总页数
},
onLoad: function (options) {
this.getInfo()
},
// 获取分页列表
getInfo: function () {
var that = this;
$api.findList({
pageNum:that.data.pageNum,
pageSize:that.data.pageSize
}).then(res => {
var list = that.data.list;
wx.hideNavigationBarLoading() //在当前页面隐藏导航条加载动画
wx.stopPullDownRefresh()
if(res.data){
if (res.data.list.length > 0) {
if (that.data.pageNum == 1) {
list = []
}
var ResdataList = res.data.list;
that.setData({
pages:res.data.pages
})
// 如果后端返回的数据长度<10 || 前端传参的当前页==后端返回的总页数(则说明当前就是最后一页)
if (ResdataList.length < that.data.pageSize||that.data.pageNum==that.data.pages) {
// console.log("不在继续请求")
var firmlistArr=list.concat(ResdataList)
// 去重---当你继续请求第二页并且第一页有新数据,则页面无法显示新一条数据,并且第二页的第一条数据和第一页的最后一条数据重复了
for(var i=0;i<firmlistArr.length;i++){
for(var j=i+1;j<firmlistArr.length;j++){
if(firmlistArr[i].id==firmlistArr[j].id){
firmlistArr.splice(j,1)
j--
}
}
}
that.setData({
list: firmlistArr,
hasMoreData: false,
isHideLoadMore:false
})
} else {
// console.log("页码+1,继续请求")
var firmlistArr=list.concat(ResdataList)
for(var i=0;i<firmlistArr.length;i++){
for(var j=i+1;j<firmlistArr.length;j++){
if(firmlistArr[i].id==firmlistArr[j].id){
firmlistArr.splice(j,1)
j--
}
}
}
that.setData({
list: firmlistArr,
hasMoreData: true,
pageNum: that.data.pageNum + 1
})
}
}else{
// 如果res.data.list==[],隐藏 加载更多 样式
that.setData({
isHideLoadMore:false
})
}
}else{
// 如果res.data==null,隐藏 加载更多 样式
that.setData({
isHideLoadMore:false
})
}
}).catch(err => {})
},
// 上拉触底
onReachBottom: function () {
if (this.data.hasMoreData) {
this.setData({
isHideLoadMore:true
})
this.getInfo()
} else {
this.setData({
isHideLoadMore:false
})
wx.showToast({
title: '没有更多了...',
icon:"none"
})
}
},
// 下拉刷新
onPullDownRefresh: function () {
wx.showNavigationBarLoading();
this.setData({
pageNum: 1,
list: [],
})
this.getInfo()
}
})