微信小程序 - - - - scroll-view 自定义 下拉刷新_微信小程序scrollview自定义组件下拉刷新

在使用了scroll-view的时候，该如何实现下拉刷新呢？
官方API： scroll-view

1. 示例

示例：

    <scroll-view 
      scroll-y="true" 
      refresher-enabled='true' 
      refresher-default-style="black" 
      refresher-triggered='{{triggered}}' 
      bindrefresherpulling="onPulling" 
      bindrefresherrefresh="onRefresh"
      bindrefresherrestore="onRestore" 
      bindrefresherabort="onAbort">
	 。 。 。 
	</scroll-view>
1
2
3
4
5
6
7
8
9
10
11

data:{
	triggered: false, // 下拉刷新
},


...

  // 下拉 但是没松手！！！
  onPulling() {
    console.log('自定义下拉刷新被触发');
  },

  // 回弹复位
  onRestore(event, ownerInstance) {
    console.log('onRestore 自定义下拉刷新被复位');
  },

  // 被中止
  onAbort() {
    console.log('onAbort 自定义下拉刷新被中止');
  },

  // 下拉 松手了！！！
  onRefresh() {
    console.log('onRefresh 下拉松手 请求数据')
    this.setData({
    	triggered:true
    },()=>{
    	// 模拟请求回数据后 停止加载
    	setTimeout(()=>{
    		this.setData({
    			triggered:false
			})
    	}, 1000)
    })
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

2. 遇到问题

2.1 当按住下拉不松开时，会不间断的重复发送请求

刚开始是在onPulling里发送请求，所以会出现该问题

2.2 下拉刷新松开后，没有回弹

记得配置refresher-triggered='{{triggered}}'

---

---

参考文献：
scroll-view
小程序自定义下拉刷新
微信小程序：scroll-view实现自定义的列表下拉刷新
bindrefresherpulling和bindrefresherrefresh的区别？
scroll-view的refresher-threshold属性控制的是什么阈值