加载更多,其实就是再次向接口发送请求,把返回的数据,追加到渲染页面的数组里的过程,具体实现实例如下:
demo.js
// pages/project/project.js const app = getApp() Page({ /** * 页面的初始数据 */ data: { //每页显示的行数: pagesize: 7, //页码(从1开始): p: 1, //排序方式: paixu: \'viewcount\', //升序或降序: order: \'desc\', //用于标识是否还有更多的状态 state: 1, //用于渲染页面的数组 arrayProject:[], //用于数组的追加和暂存 allProject:[], }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var mythis = this; getproinfo( this.data.pagesize, this.data.p,mythis) }, /** * 点击加载更多时触发 */ loadMore:function(){ var mythis = this; wx.showLoading({ title: \'玩命加载中...\', }); mythis.data.p = mythis.data.p + 1; getproinfo(this.data.pagesize, this.data.p,mythis); wx.hideLoading(); }, /** * 页面上拉触底事件的处理函数,与点击加载更多做同样的操作 */ onReachBottom: function () { var mythis = this; wx.showLoading({ title: \'玩命加载中...\', }); mythis.data.p = mythis.data.p + 1; getproinfo(this.data.pagesize, this.data.p,mythis); wx.hideLoading(); }, }) /** * 获取项目列表 */ function getproinfo(pagesize, p, mythis){ wx.request({ url: app.globalData.host + \'index.php/Ho/getproinfo\', method: \'post\', data: { pagesize: pagesize, p:p }, header: { \'content-type\': \'application/x-www-form-urlencoded\' }, success: function (res) {
//如果搜出来的结果<1 就说明后面已经没数据可加载了,所以将state设为0 if (res.data.rows.length<1) mythis.setData({ state: 0 }); else{ var state1 = 1;
//如果有数据,但小于每次期望加载的数据量(pagesize),将state设为0,表示后面已没有数据可加载 if (res.data.rows.length < mythis.data.pagesize) var state1 = 0; //循环将结果集追加到数组后面 for (var i = 0; i < res.data.rows.length; i++) { mythis.data.allProject.push(res.data.rows[i]); } mythis.setData({ arrayProject: mythis.data.allProject, state: state1 }); } console.log(mythis.data.arrayProject) }, fail: function (res) { console.log(res); } }); }
demo.html
<view class=\'projectlist\' > <view class=\'project\' wx:for="{{arrayProject}}" wx:for-item="itemProjec" wx:key="id" data-datas="{{itemProjec}}" bindtap=\'projectDetail\'> <view class=\'projectText\'> {{itemProjec.gongchengmingcheng}} </view> <view class=\'projectleibie label\'> {{arrayCategory[itemProjec.leixing].name}} </view> <view class=\'projectjiesuan label\'> {{arraySchedule[itemProjec.jieduan].name}} </view> <view class=\'projectTime\'> {{itemProjec.faburiqi}} </view> </view>
<!--
实现点击“加载更多”时进行加载
<view class=\'remind\' bindtap=\'loadMore\' wx:if="{{state==0}}"><view><<加载更多<<</view></view>
<view class=\'remind\' wx:elif="{{state==0}}"><view>没有更多了</view></view>
-->
//实现屏幕上拉加载更多 <view class=\'remind\' wx:if="{{state==0}}"><view>没有更多了</view></view> </view>