【微信小程序】上拉刷新和下拉加载

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/z767327552/article/details/82908726

上拉刷新和下拉加载有两种方式可以实现:

1.使用scroll-view组件进行操作,使用自带的scrolltoupper和scrolltolower事件可以实现。适合页面局部的上拉下拉。

附上文档:

https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html   

2.使用page页面事件处理函数 onPullDownRefresh() 下拉刷新 和 onReachBottom()上拉触底事件 可以进行数据上拉刷新和下拉加载的效果。但是注意,此为页面的上拉和下拉,并不适合局部,所以文档也写了跟scroll-view组件不能兼容在一个页面操作处理。

附上文档:

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#pageonpulldownrefresh  

ps:两种版本的文档看着真的别扭。

onPullDownRefresh()

监听用户下拉刷新事件。


  onPullDownRefresh: function() {
    wx.stopPullDownRefresh();
    //数据刷新加载操作
  },

onReachBottom()

监听用户上拉触底事件。

  • 可以在app.jsonwindow选项中或页面配置中设置触发距离onReachBottomDistance
  • 在触发距离内滑动期间,本事件只会被触发一次。
  onReachBottom: function() {
    if (!lock && !finish) {
      lock = true ;//锁定加载操作,避免多次重复加载
      page = page + 1;
     //页面加载loading显示
     //数据加载操作
    }
  },

 

展开阅读全文

没有更多推荐了,返回首页