小程序实现列表下拉刷新

小程序的scroll-view组件

1、滚动 1.1 纵向滚动：scroll-y 1.2 横向滚动：scroll-x 2、下拉刷新 使用scroll-view实现下拉刷新，主要通过四个事件来实现自定义的下拉刷新 bindrefreshpulling：往下拉的过程（处于视图层，可频繁操作dom） bindrefreshrefresh：下拉更新的动作（网络请求的加载） bindrefreshrestore：下拉刷新完的重置 bindrefreshabort：异常情况的处理，正常不会用到。

代码实例如下： wxml ` var pullingMessage = "下拉刷新"

module.exports = {
	onRefresh: function(e, instance) {
		// 此时手拉开了，进入了加载中的状态
		pullingMessage = "更新中"
		console.log(pullingMessage)
		instance.callMethod("setData", {
			pullingMessage: pullingMessage,
			refresherTriggered: true
		})
		instance.callMethod("willCompleteRefresh", {})
	},
	onAbort: function(e, instance) {
		// 异常状态，例如被事件突然打断，事件包括电话等，被迫松手了
		pullingMessage = "下拉刷新"
		console.log(pullingMessage)
	},
	onRestore: function(e, instance) {
		// 回去了，松手了，恢复原位了，不刷了
		pullingMessage = "下拉刷新"
		console.log(pullingMessage)
	},
	onPulling: function(e, instance) {
		// 80的高度，因为refresher-threshold设置的是80，手指按住往下拉的状态
		var p = Math.min(e.detail.dy / 80, 1)
		// console.log(p)
		// 这里在视图层，不怕频繁操作DOM
		var icon = instance.selectComponent('#refresherIcon')
		icon.setStyle({
			opacity: p,
			transform: "rotate(" + (90 + p * 180) + "deg)"
		})
		var view = instance.selectComponent('.refresh-container')
		view.setStyle({
			opacity: p,
			transform: "scale(" + p + ")"
		})
		if (e.detail.dy >= 80) {
			if (pullingMessage == "下拉刷新") {
				pullingMessage = "释放更新"
				instance.callMethod("setData", {
					pullingMessage
				})
			}
		}
	}
}

自定义下拉刷新 {{pullingMessage}}

	<view wx:for="{{arr}}" id="view{{item+1}}" style="display: flex;height: 100px;">
		<text style="position:relative;top:5px;left:5px;color:black;">{{item+1}}</text>
		<image src="https://cdn.nlark.com/yuque/0/2020/jpeg/1252071/1586359160786-8d5b7738-3ad3-43e7-bf0a-738c58365645.jpeg"></image>
		<image src="https://cdn.nlark.com/yuque/0/2020/jpeg/1252071/1586359160786-8d5b7738-3ad3-43e7-bf0a-738c58365645.jpeg"></image>
		<image src="https://cdn.nlark.com/yuque/0/2020/jpeg/1252071/1586359160786-8d5b7738-3ad3-43e7-bf0a-738c58365645.jpeg"></image>
		<image src="https://cdn.nlark.com/yuque/0/2020/jpeg/1252071/1586359160786-8d5b7738-3ad3-43e7-bf0a-738c58365645.jpeg"></image>
		<image src="https://cdn.nlark.com/yuque/0/2020/jpeg/1252071/1586359160786-8d5b7738-3ad3-43e7-bf0a-738c58365645.jpeg"></image>
	</view>
</scroll-view>
<view class="btn-area">
	<button bindtap="plusScrollUpValue">向上滚动</button>
	<button bindtap="scrollToView1">滚动到子视图</button>
	<button bindtap="unshiftOnePic">顶部添加一张图</button>
</view>`

下拉刷新的效果图：