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

1.实现流程图

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

2.前端JS 和 WXML

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

WXML：

    
        
        
            订单金额：{{item.price}}元
            2022-09-30
        
    

{{text}}

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

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();
	
}