微信小程序 - - - - scroll-view 自定义 下拉刷新

在使用了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>
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)
    })
  },

2. 遇到问题

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

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

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

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



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


版权声明:本文为Dark_programmer原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。