一、模型

设置分页大小:pageLength = 10
设置首页跨度:start = 0
​ end = pageLength
发送请求:balabala
获取数据:var arr1 = 结果数组
​ var arr2 = 当前返回数据
​ arr1 = arr1.concat(arr2) 合并数组

分页判断:if arr1.length == pageLength 标记所有数据加载完毕
触底下拉:start += pageLength
​ end += pageLength

后端:LIMIT ?,?
​ req.start
​ req.end - req.start

二、小程序

在列表的最末尾处,添加加载完毕的标志:

<van-divider wx:if="{{!isMore}}" contentPosition="center">没有更多了</van-divider>

处理滑动事件,分页的递增也是发生在此处的,页面全部加载完毕后就不用继续发请求了。

onReachBottom: function() {
var that = this;
if (that.data.isMore) {
that.setData({
start: that.data.start + that.data.pageLength,
end: that.data.end + that.data.pageLength
});
that.knowledgeQry(); // 发送后端请求
} else {
console.info('全部加载完毕了 qwq');
}
}

后端发起搜索,存值啊什么的,本次获取列表的长度小于分页长度,就可以视为到了最后一页啦。

knowledgeQry: function() {
app.wxRequest('加载中', url, req, (res) => {
let data = res.resp;
let arr1 = that.data.searchResult;
let arr2 = data.knowledges;
arr1 = arr1.concat(arr2);
if (JSON.stringify(data) == "{}") {
that.setData({
searchResult: [],
isSearch: true
})
} else {
that.setData({
searchResult: arr1,
isMore: arr1.length != recordsTotal
})
}
}, (err) => {
console.error(err)
});
}

搜索的时候,判断下输入框文本是否改变,没改变就不发后端了,此外搜索时相应变量重置~

三、UI 界面

评论

:doodle { @grid: 1x5 / 100vmin; } @place-cell: center; width: @rand(45vmin, 75vmin); height: @rand(45vmin, 75vmin); transform: translate(@rand(-120%, 120%), @rand(-80%, 80%)) scale(@rand(.8, 2.8)) skew(@rand(45deg)); clip-path: polygon( @r(0, 30%) @r(0, 50%), @r(30%, 60%) @r(0%, 30%), @r(60%, 100%) @r(0%, 50%), @r(60%, 100%) @r(50%, 100%), @r(30%, 60%) @r(60%, 100%), @r(0, 30%) @r(60%, 100%) ); background: @pick(#f44336, #9c27b0, #673ab7, #3f51b5, #60569e, #e6437d, #ebbf4d, #00bcd4, #03a9f4, #2196f3, #009688, #5ee463, #f8e645, #ffc107, #ff5722, #43f8bf, #e136eb, #32ed39); opacity: @rand(.5, .9); position: relative; top: @rand(-80%, 80%); left: @rand(0%, 80%); animation: colorChange @rand(6.1s, 26.1s) infinite @rand(-.5s, -2.5s) linear alternate; @keyframes colorChange { 100% { left: 0; top: 0; filter: hue-rotate(360deg); } }