前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序-上拉加载更多和下拉刷新

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

作者头像
超级小的大杯柠檬水
发布2023-06-20 15:18:28
4080
发布2023-06-20 15:18:28
举报
文章被收录于专栏:CYCY

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

下拉刷新

  1. 页面配置文件中配置"enablePullDownRefresh": true开启下拉刷新
代码语言:javascript
复制
{
    "usingComponents": {},
    "navigationBarTitleText": "订单列表",
    "enablePullDownRefresh": true
}
  1. 设置onPullDownRefresh方法 在用户下拉时会调用onPullDownRefresh方法 在完成后需要调用wx.stopPullDownRefresh()关闭刷新状态
代码语言:javascript
复制
Page({
    data: {
        list:[],
    },
    onLoad(options) {
        this.getList()
    },
    // 下拉刷新时调用
    onPullDownRefresh(){
    	this.getList()
    },
    getList(){
           setTimeout(()=>{
            wx.stopPullDownRefresh()
        },500) 	
    },
})

上拉加载更多

  1. 可以在页面配置文件中配置"onReachBottomDistance":50来设置触发上拉加载的距离,单位为px默认:50
代码语言:javascript
复制
{
    "usingComponents": {},
    "navigationBarTitleText": "订单详情",
    "onReachBottomDistance":100
}
  1. 设置onReachBottom方法 在用户上拉加载时会调用onReachBottom方法
代码语言:javascript
复制
import api from "../../../utils/api/index"
Page({
    data: {
        list:[],
    },
    onLoad(options) {
        this.getList()
    },
    // 上拉加载调用
    onReachBottom(){
        this.getList()
    },
    getList(){
    }
})

模板

返回最后ID

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

在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
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,
            })
        })
    }
})
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-06-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 微信小程序-上拉加载更多和下拉刷新
    • 下拉刷新
      • 上拉加载更多
        • 模板
          • 返回最后ID
      相关产品与服务
      云开发 CloudBase
      云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档