微信小程序 - - - - 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属性控制的是什么阈值

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值