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

下拉刷新

1. 頁面配置文件中配置"enablePullDownRefresh": true開啟下拉刷新

{
    "usingComponents": {},
    "navigationBarTitleText": "訂單列表",
    "enablePullDownRefresh": true
}

2. 設(shè)置onPullDownRefresh方法
   在用戶下拉時會調(diào)用onPullDownRefresh方法
   在完成后需要調(diào)用wx.stopPullDownRefresh()關(guān)閉刷新狀態(tài)

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

上拉加載更多

1. 可以在頁面配置文件中配置"onReachBottomDistance":50來設(shè)置觸發(fā)上拉加載的距離，單位為px。默認：50

{
    "usingComponents": {},
    "navigationBarTitleText": "訂單詳情",
    "onReachBottomDistance":100
}

2. 設(shè)置onReachBottom方法
   在用戶上拉加載時會調(diào)用onReachBottom方法

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

模板

返回最后ID

請求需要帶上最后的IDlast_id，及行數(shù)row
文章來源地址http://www.zghlxwxcb.cn/news/detail-612728.html

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=>{
            // ...將元素將一個數(shù)組展開為單獨的元素,逐個添加
            this.data.list.push(...res.list)
            // 如果返回的元素比行數(shù)少，表示沒有結(jié)果了
            if(res.list.length < this.data.row){
                this.setData({is_have:false})
            }
            this.setData({
                list: this.data.list,
                last_id:res.last_id,
            })
        })
    }
})

到了這里，關(guān)于微信小程序-上拉加載更多和下拉刷新的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！