小程序分页，滚动条滚到底部时往列表里添加数据

最近做小程序分页，可以有两种处理方式，一种是滚动到底部显示下一页，另一种是滚动到底部，往列表里加一页数据，我用的是第二种，效果比第一种好多了

wxml:列表底部添加文字提示：

<view wx:if="{{goodsList.length > 0}}" class="loading"> {{loadingTxt}}</view>

wxss:

.loading{

text-align: center;

font-size: 12px;

margin: 10px 0;

js 参数定义：

Page({

data: {

keyword: '',

searchStatus: false,

goodsList: [],

page: 1,

size: 20,

id: 0,

loadingTxt: '',

noMoreData: false,

},

数据请求：

getGoodsList: function (paged = false) {

let that = this;

util.request(api.GoodsList, { id: that.data.selectedId, page: that.data.page, size: that.data.size }, 'POST').then(function (res) {

if (res.errno === 0) {

let goods = [];

if (!paged) {

goods = res.data;

}

else{

//当滚动到页面底部时，往列表里添加数据，其它情况（关键字查询，页签切换等）只显示一页数据

goods = that.data.goodsList.concat(res.data);//concat:复制整个数组到前面的数组

}

that.setData({

loadingTip: '',

noMoreData: false,

goodsList: goods,

});

if (res.data.length < that.data.size) {

that.setData({

loadingTxt: '没有更多内容',

noMoreData: true,

});

}

}

});

},

js:

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

  onPullDownRefresh: function () {

this.data.page = 1

this.getGoodsList();

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

if (!this.data.noMoreData) {

this.data.page = this.data.page + 1;

this.getGoodsList(true);

};

},

 

点击加入qq群，一起学习交流