微信小程序-上拉加载更多和下拉刷新

超级小的大杯柠檬水

发布于 2023-06-20 07:18:28

62600

代码可运行

文章被收录于专栏：CYCY

运行总次数：0

代码可运行

微信小程序-上拉加载更多和下拉刷新

下拉刷新

页面配置文件中配置"enablePullDownRefresh": true开启下拉刷新

{
    "usingComponents": {},
    "navigationBarTitleText": "订单列表",
    "enablePullDownRefresh": true
}

设置onPullDownRefresh方法在用户下拉时会调用onPullDownRefresh方法在完成后需要调用wx.stopPullDownRefresh()关闭刷新状态

Page({
    data: {
        list:[],
    },
    onLoad(options) {
        this.getList()
    },
    // 下拉刷新时调用
    onPullDownRefresh(){
    	this.getList()
    },
    getList(){
           setTimeout(()=>{
            wx.stopPullDownRefresh()
        },500) 	
    },
})

上拉加载更多

可以在页面配置文件中配置"onReachBottomDistance":50来设置触发上拉加载的距离，单位为px。默认：50

{
    "usingComponents": {},
    "navigationBarTitleText": "订单详情",
    "onReachBottomDistance":100
}

设置onReachBottom方法在用户上拉加载时会调用onReachBottom方法

import api from "../../../utils/api/index"
Page({
    data: {
        list:[],
    },
    onLoad(options) {
        this.getList()
    },
    // 上拉加载调用
    onReachBottom(){
        this.getList()
    },
    getList(){
    }
})

模板

返回最后ID

请求需要带上最后的IDlast_id，及行数row

import api from "../../../utils/api/index"
Page({
    data: {
        list:[],
        last_id:0,
        row: 10,
        is_have:true
    },
    onLoad(options) {
        this.getList()
    },
    onPullDownRefresh(){
        this.setData({
            last_id:0,
            is_have:true,
            list:[]
        })
        this.getList()
    },
    onReachBottom(){
        if(this.data.is_have){
            this.getList()
        }  
    },
    getList(){
        api.getOrderList({last_id:this.data.last_id, row: this.data.row}).then(res=>{
            // ...将元素将一个数组展开为单独的元素,逐个添加
            this.data.list.push(...res.list)
            // 如果返回的元素比行数少，表示没有结果了
            if(res.list.length < this.data.row){
                this.setData({is_have:false})
            }
            this.setData({
                list: this.data.list,
                last_id:res.last_id,
            })
        })
    }
})