小程序做得多了,有些常用功能就有必要记录一下
请看详解:
wxml参考:
<scroll-view class='dataContainer' scroll-y bindscrolltolower="nextDataPage"> <block wx:for="{{userList}}" wx:key="index">
<text>这是一条数据:{{item.data}}</text>
</block> <view class='bottomline' wx:if="{{userList.length > 0}}" >{{isLastPage?"没有更多数据了":"加载中..."}}</view>
<view class='bottomline' wx:if="{{userList.length == 0}}" >暂时没有数据</view> </scroll-view>
js参考:
data: {
page:1,
rows:20,
isLastPage:false,
isLoadInterface: false,
userList:[]
},
//查询数据列表
searchDataList:function(pageNum){
let that = this;
let pageIndex = pageNum;
util.ajax({
url: '接口地址',
method: "POST",
data: {
"page": pageIndex,
"rows":that.data.rows
},
success: function (res) { that.setData({
isLastPage:res.data.islast,
page: pageIndex,
isLoadInterface: false
}) if(res.data.list != undefined){
if (pageIndex > 1){
var listBefore = that.data.userList;
var currentList = res.data.list;
that.setData({
userList:listBefore.concat(currentList)
})
}else{
that.setData({
userList: res.data.list
})
}
} }, complete(e) {
that.setData({
isShowLoadPage: false
})
}
}) },
// 加载下一页数据
nextDataPage: function () {
let that = this; let islastVar = that.data.isLastPage; if (!that.data.isLoadInterface) {
if (!islastVar) {
//防止在接口未执行完再次调用接口
that.setData({
isLoadInterface: true
}) let page = that.data.page * 1 + 1; that.searchDataList(page); }
} },
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { var that = this; let page = that.data.page;
that.searchDataList(page); }
思路:以小程序标签scroll-view作为列表容器,容器方法bindscrolltolower来触发下一页加载
页面onload后执行第一页,非第一页的数据用concat方法拼接之前的数据
防止接口未执行完反复触发bindscrolltolower里的方法,用一个变量isLoadInterface来截断
接口的数据中应有islast这类是否最后一页的参数,用来判断是否加载全部数据