博客

使用scroll-view标签

refresher-enabled=“true” 开启下拉刷新



refresher-triggered 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发



bindrefresherrefresh 自定义下拉刷新被触发事件



bindscrolltolower 滚动到底部触发事件

页面定义

<scroll-view class="content" style="width:100%;height:100vh;"
     refresher-triggered = '{{loading}}' 
     bindrefresherrefresh="onRefresh"
      refresher-enabled="true"  
      bindscrolltolower="scrollToLower" 
      scroll-y="true">
</scroll-view>

js中定义

data: {
      // 上拉刷新
      loading:true
  }

下拉事件

/**
   * 下拉刷新
   */
  onRefresh: function () {
    const self = this;
    //定时器，两秒后触发操作
    setTimeout(() => {
      self.setData({
        loading:false
      })
    }, 2000)
  }