IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> 微信小程序下拉刷新,上拉加载 -> 正文阅读

[移动开发]微信小程序下拉刷新,上拉加载

写项目的时候遇到这个问题,百度搜了一下,发现看不懂,不知道是我理解问题,还是什么,索性自己按照这个功能的实现逻辑自己写了
大概思路:
1.下拉刷新:
事件处理函数onPullDownRefresh(),一般页面生成的时候就会有,触发这个事件的时候,重新请求一下接口,处理完数据后,再用wx.stopPullDownRefresh停止刷新
在这里插入图片描述
过程文档上写的很清楚了,直接上代码
使用刷新页面对应的json文件

{
  "navigationBarTitleText": "我的预约",
  "enablePullDownRefresh": true,
  "onReachBottomDistance": 50,
  "backgroundTextStyle": "dark",
  "usingComponents": {}
}

窗口背景色默认是白色,backgroundTextStyle要设置成深色,dark,不然,下拉loading会看不清
在这里插入图片描述

js
下面展示一些 内联代码片

  onPullDownRefresh: function () {
    setTimeout(() => {
      this.getList()
      wx.stopPullDownRefresh();
    }, 500)
  },

this.getList() 获取的列表数据
2.上拉加载:
触发上拉事件的时候,让当前页面大小,pageSize+10(加多少看自己),再重新请求一下数据
代码:
下面展示一些 内联代码片

  data: {
    pageSize:10,
    totalCount:0
  },
  getList() {
    // 调接口时,将pageSize传过去
    getReserveList({pageSize: this.data.pageSize}).then(res => {
      if (res.code === 200) {
        const reserveList = res.data.list
        const pageSize = res.data.pageSize
        const totalCount = res.data.totalCount
        this.setData({
          reserveList,
          pageSize,
          totalCount,
        })
      }
    })
  },
onReachBottom: function () {
    var that = this
    // 显示加载图标
    wx.showLoading({
      title: '玩命加载中...',
    })
    const pageSize = that.data.pageSize  // 请求数据条数
    const totalCount = that.data.totalCount  // 总数据条数
    if (pageSize < totalCount) {
      that.setData({
        pageSize: that.data.pageSize + 10
      })
      that.getList()   // 重新请求数据
    } else {
      wx.showToast({
        title: '已经到底啦~',
        duration: 1000,
        icon: 'none',
      })
    }
  },

如果有什么要补充的,或者更好的方法,欢迎留言私戳~

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2021-09-12 13:16:58  更:2021-09-12 13:17:26 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 17:05:54-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码