微信小程序下拉刷新和上拉加载的实现

27 篇文章 0 订阅
25 篇文章 0 订阅

小程序下拉刷新 都是我们习以为常了吧

一直说 下拉有两种方式 scrollview 和 onPullDownRefresh(小程序自带的api)

辣么实现操作呢

很多人讲利用 用 "enablePullDownRefresh":true   这是没有错的 但到底怎么使用呢,那我来说一下

第一、 在app.json文件中 window对象下 定义

// app.json
"window": {
    "backgroundTextStyle": "light",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "东方世纪城",
    "navigationBarBackgroundColor": "#FFFFFF",
    "backgroundColor": "#F2f2f2",
    "enablePullDownRefresh":true
  },

这是没有错的,这是全局引用  相当于 每个页面都有下拉刷新功能了

第二、 在各个模块main.json 文件中 定义

// main.json  依需加载
{
  "navigationBarTitleText": "列表",
  "enablePullDownRefresh": true
}

实现当前页面 的下拉刷新功能
 

以上都是局部实现功能

最重要的 是

在模块的index.js

async onPullDownRefresh() {
    // 停止下拉刷新
    await this.getEntrustListPage(1) // 自己写的方法
    wx.stopPullDownRefresh()
  },

  onReachBottom() { // 上拉加载更多
    const pageNum = this.currentPage + 1
    const totalPage = this.entrustListCount
    if (pageNum <= totalPage) {
      this.getEntrustListPage(pageNum)
    }
  }

完美了,重要的 是 
记住了: onPullDownRefresh、onReachBottom 要与 onUnload 或者 mounted、methods 同级 放入 pages

我就是吃了个亏

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值