开启我的第一篇小程序文章关于上拉加载更多及下拉刷新

我来说说我开发一般用的上拉加载更多及下拉刷新:

先说下拉刷新

onPullDownRefresh: 下拉刷新

  • 监听用户下拉刷新事件。
  • 需要在app.jsonwindow选项中或页面配置中开启enablePullDownRefresh
  • 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

  (当然网上还有一些方法可以借鉴下)

 

然后上拉加载更多

1.onReachBottom: 上拉触底

  • 监听用户上拉触底事件。
  • 可以在app.jsonwindow选项中或页面配置中设置触发距离onReachBottomDistance(默认触发距离应该是0我没记错的话,也可不设置)
  • 在触发距离内滑动期间,本事件只会被触发一次。 
  /* 页面上拉触底事件的处理函数*/
  onReachBottom: function () {
    this.setData({
      page:++this.data.page
    })
    this.contenttalk(this.data.aid);
    // console.log(1)
  },

      一般在某个xx.js文件都会有默认的onReachBottom方法,直接在里面操作即可。

 

2.当使用到scroll-view标签时会使用bindscrolltolower来实现上拉加载更多

  

    wxml文件:

    <scroll-view scroll-y scroll-with-animation='true' scroll-top='{{ topNum }}' bindscroll='scrolly' bindscrolltolower="scrollbottom"></scroll-view>
 
    js文件:
    
    //上拉加载更多
    scrollbottom(){
      this.setData({
      page:this.data.page+1
      })
      // console.log(this.data.page);
    },
    (代码没写全,只要明白这个意思就ok了)
 
 
posted @ 2018-03-09 11:00  小白是鱼骨头呀!  阅读(85)  评论(0编辑  收藏  举报