亲测,有效;
之前没怎么写前端,感觉小程序滚动加载很复杂很复杂,就是一脸懵逼,然后这次遇到了,没法,只能顶着头皮上了,一番操作,好像挺简单啊。
还是那句话,理解这个逻辑,不要直接抄,下次即使自己写,也会了。
框架:微擎;
小程序:小程序商城;
首先,第一部分js(也是最重要的部分):
//index.js //获取应用实例 const app = getApp() var page = 1;//初始化页(定义在以下data中也是可行) Page({ data: { list:[], totalpage:0, }, //初始化加载数据 onLoad: function () { this.getList(0) }, getList: function() { var e = this; //显示 加载中的提示(借鉴) wx.showLoading({ title: '数据加载中...', }) var lastList = this.data.list;//获取上次请求的数据,下面需要用到 wx.request({ url:"commission/order/get_list?page" + page,//请求url,一般微信小程序都有封装公用的url,根据自己的实际情况来即可 method:'GET',//请求方式 success:function(t){ console.log(t)//自行查看数据接口,获取数据列表,本人数据类型是在data.list下 var newList = lastList.concat(t.data.list);//concat函数为合并数组 e.setDate({ list:newList; totalpage:t.data.page;//获取总页数 }) //隐藏 加载中的提示 wx.hideLoading(); } }) }, //onReachBottom函数即为微信内置函数,直接拿来用即可;作用就是滑动到底部,会自动触发该函数 onReachBottom:function(){ page++, if(this.data.totalpage > page){ this.getList(page) }else{ console.log('到底了') } } })
或第二种场景(根据自己的需求而定)
//index.js //另外一种情况: // 1.当后端没有返回总页数 // 2.后端数据只有返回总条数时 const app = getApp() var page = 1;//初始化页(定义在以下data中也是可行) Page({ data: { list:[], totalpage:0, pagesize:20, }, //初始化加载数据 onLoad: function () { this.getList(0) }, getList: function() { var e = this; //显示 加载中的提示(借鉴) wx.showLoading({ title: '数据加载中...', }) var lastList = this.data.list;//获取上次请求的数据,下面需要用到 wx.request({ url:"commission/order/get_list?page" + page + '&pagesize=' this.data.pagesize,//请求url,一般微信小程序都有封装公用的url,根据自己的实际情况来即可 method:'GET',//请求方式 success:function(t){ console.log(t)//自行查看数据接口,获取数据列表,本人数据类型是在data.list下 var total = parseInt(t.total / this.data.pagesize);// parseInt取整(或进一,取整有一定的弊端,进一理论上没什么问题) t.total / this.data.pagesize 总条数/每页显示数据 = 总页数 var newList = lastList.concat(t.data.list);//concat函数为合并数组 e.setDate({ list:newList; totalpage:total;//获取总页数 }) //隐藏 加载中的提示 wx.hideLoading(); } }) }, //onReachBottom函数即为微信内置函数,直接拿来用即可;作用就是滑动到底部,会自动触发该函数 onReachBottom:function(){ page++, if(this.data.totalpage > page){ this.getList(page) }else{ console.log('到底了') } } })
第二步,就是wxml页面数据的遍历:
这里就不多说了,也就是一个遍历的问题
<!--index.wxml-->
<view wx:for="{{list}}">
<view data-obj={{item}} data-index='{{index}}'>
<view >ID:{{item.id}}</view>
<view >昵称:{{item.nickname}}</view>
</view>
</view>
以上都是从自己项目中搬过来的,亲测有效。
在自己项目进行之前,借鉴了这位博友,思路确实非常清晰,一目了然 https://blog.csdn.net/qq_41408081/article/details/102465765