微信小程序-下拉滚动加载数据

1.实现流程图

所谓工欲善其事，必先利其器，做程序之前咱们把思路整理一下 ，画流程图是比较好的方式

2.前端JS 和 WXML

视图绑定  scrollToLower 方法 ，当离底部还有100时候触发;

WXML：

<scroll-view scroll-y lower-threshold="100" bindscrolltolower="scrollToLower" style="height: 100vh;"><view class="items" wx:for="{{list}}" wx:key="{{item.id}}"><image src="{{item.img}}"/><view class="datas"><view class="beauty">订单金额：{{item.price}}元</view><view class="times">2022-09-30</view></view></view>
</scroll-view>
<view class='text-style'>{{text}}</view>

datalock 等于1 时， 不发出网络请求， 已免不必要的网络开销;

数据返回时 使用 concat 拼接

JS：

    data: {list:[],page:1,text:'',datalock:0},onLoad: function (options) {this.getDatas();},scrollToLower:function(){if(this.data.datalock==1){return false;}else{wx.showToast({title: '加载中...',icon:"loading",duration:600});this.getDatas();}  },getDatas:function(){var that = this;wx.request({url:'https://www.test.com/loaddata',method:"GET",data:{token:wx.getStorageSync('userid'),page:that.data.page,},success:function(res){//console.log(res.data);if(res.data.data.length > 0 ){let newlist = that.data.list.concat(res.data.data); //拼接数据for(let i=0;i<newlist.length;i++){newlist[i].jsonformat =  JSON.parse(newlist[i].json);newlist[i].timeformat =  tools.formatTime(newlist[i].addtime,'Y-M-D h:m');}that.setData({list : newlist,page : that.data.page +1,text: '加载更多'});//console.log(that.data.list);}else{that.setData({text: '到底啦!',datalock:1});}},fail:function(res){console.log(res);}});}

3.后端代码

这里使用tp6.1 来做接口通讯

use think\Request;
use think\Db;
use think\Config;
...
public function loaddata(Request $request){$token = trim($request->param('token'));$page = intval($request->param('page'));$pageNum = 5;if(!$page){$page=1;}$res_data = Db::name('usercolor')->where("uidtoken='".$token."'")->order('id desc')->limit(($page-1)*$pageNum,$pageNum)->select();if($res_data){make_jsons($res_data);exit(); }else{make_jsons([],400,'error');exit();}
}
...

顺带附上make_jsons方法：

function make_jsons($dataArr=[],$code=200,$message='suc'){$codedata = [  'status' => $code,  'message' => $message,  'data' =>$dataArr,  ];  echo  json_encode($codedata);exit();}