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

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();
	
}
相关推荐
mosen8683 小时前
【微信小程序】报错: http://127.0.0.1:7001 不在以下 request 合法域名列表中
微信小程序·小程序
Luostir6 小时前
在uniapp中实现富文本的编辑,上传与回显
前端·微信小程序
番茄Salad6 小时前
微信小程序中实现某个样式值setData改变时从350rpx到200rpx的平滑过渡效果
微信小程序·小程序
若川7 小时前
Taro 4 已发布:11. Taro 是如何解析入口配置 app.config.ts 和页面配置的?
前端·javascript·微信小程序
老李不敲代码12 小时前
榕壹云无人共享系统:基于SpringBoot+MySQL+UniApp的物联网共享解决方案
spring boot·物联网·mysql·微信小程序·uni-app·软件需求
低代码布道师1 天前
加油站小程序实战教程10开通会员
前端·javascript·低代码·小程序
傻小胖1 天前
UniApp 实现兼容 H5 和小程序的拖拽排序组件
小程序·uni-app
咕噜签名1 天前
运行小程序需要选择什么配置的服务器
运维·服务器·小程序
玲子的猫1 天前
微信小程序实现table样式,自带合并行合并列
微信小程序·小程序·notepad++