微信小程序scroll-view下拉刷新组件

微信小程序scroll-view下拉刷新(附带下拉刷新效果)

背景

1. 在微信小程序上如果使用了scroll-view ，是没办法通过页面上的onPulldownRefresh函数触发下拉刷新的（重点解决的问题）
2. 如果小程序页面上有顶部栏导航栏之类的，在下拉刷新的时候会把顶部栏一起拖下
3. 想自定义下拉刷新的效果

解决方法

• 核心思路：通过监听touchstart和touchend 事件来记录e.changedTouches[0].pageY，然后通过比较就能知道是不是下拉手势
• 基于以上思路，为了开发者方便使用，自己实现了一个下拉刷新组件
  https://download.youkuaiyun.com/download/u012308481/11985615
• 下拉刷新效果如下图
  

组件调用方法

wxml

//json文件记得引入组件
<super-scroll-view  bind:lower="mylower" height="{{height}}px" bind:pulldown="myOnPullDownRefresh">
	<view>你的内容</view>
	<view>你的内容</view>
	<view>你的内容</view>
	<view>你的内容</view>
	<view>你的内容</view>
</super-scroll-view>

js

Page({
  myOnPullDownRefresh: function (event) {
  	//模拟数据请求 
    setTimeout(() => {
    	event.detail.resolve();//告诉组件完成下拉刷新，如果超过5s不调用，下拉刷新效果也会消失
	}, 1000)
  },
  mylow:function(){
  	//todo 这里会触发触底事件，可以处理自己的上拉加载逻辑
  }
})

tips

1. 可以设置不使用组件下拉刷新效果

<super-scroll-view  ball="{{false}}" bind:lower="mylower" height="{{height}}px" bind:pulldown="myOnPullDownRefresh">
	<view>你的内容</view>
	<view>你的内容</view>
	<view>你的内容</view>
	<view>你的内容</view>
	<view>你的内容</view>
</super-scroll-view>