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

程序猿John2025-04-16 9:25

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：

html 复制代码

    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 来做接口通讯

php 复制代码

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方法：

php 复制代码

function make_jsons($dataArr=[],$code=200,$message='suc'){

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