scroll-view实现自定义下拉刷新_scroll-view自定义下拉刷新orderform.js? [sm]:390 onrestore

使用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>
1
2
3
4
5
6
7

js中定义

data: {
      // 上拉刷新
      loading:true
  }
1
2
3
4

下拉事件

/**
   * 下拉刷新
   */
  onRefresh: function () {
    const self = this;
    //定时器，两秒后触发操作
    setTimeout(() => {
      self.setData({
        loading:false
      })
    }, 2000)
  }
1
2
3
4
5
6
7
8
9
10
11
12