基本库2.10.1

使用自定义下拉刷新时，需要额外配置touchmove，配置中发现即使使用了catchtouchmove依然会触发下拉刷新。所以使用动态变量 更改refresher-enable.在touchstart的时候将refresh-enable设置为false 在touchend的时候讲refresh-enable设置为true。这样虽然不会触发下拉刷新。但是在iphone手机中。scroll-view的滚动试图会额外变高很多。模拟器不会出现该问题。

源码：wxml

<wxs module="refresh">

module.exports = {

onPulling: function(evt, instance) {

var p = Math.min(evt.detail.dy / 80, 1)

console.log(p)

var view = instance.selectComponent('.refresh-container')

view.setStyle({

opacity: p,

transform: "scale(" + p + ")"

})

}

}

</wxs>

默认交互动画：

<scroll-view

scroll-y style="width: 100%; height: 400px;"

refresher-enabled="{{refresher}}"

refresher-threshold="{{100}}"

refresher-default-style="white"

refresher-background="lightgreen"

refresher-triggered="{{triggered}}"

bindrefresherpulling="onPulling"

bindrefresherrefresh="onRefresh"

bindrefresherrestore="onRestore"

bindrefresherabort="onAbort"

>

<view wx:for="{{arr}}" style="display: flex; height: 100px;">

<image catchtouchstart="start" catchtouchend="end" src="https://images.unsplash.com/photo-1565699894576-1710004524ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1832&q=80"></image>

<image src="https://images.unsplash.com/photo-1566402441483-c959946717ed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80"></image>

<image src="https://images.unsplash.com/photo-1566378955258-7633cb5c823e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"></image>

<image src="https://images.unsplash.com/photo-1566404394190-cda8c6209208?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=630&q=80"></image>

<image src="https://images.unsplash.com/photo-1566490595448-be523b4d2914?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=958&q=80"></image>

</view>

</scroll-view>

js

const app = getApp()

Page({

data: {

arr: [],

triggered: false,

refresher:true

},

onReady: function () {

const arr = []

for (let i = 0; i < 4; i++) arr.push(i)

this.setData({

arr

})

},

onPulling(e) {

console.log('onPulling:', e)

},

onRefresh() {

if (this._freshing) return

this._freshing = true

setTimeout(() => {

this.setData({

triggered: false,

})

this._freshing = false

}, 3000)

},

start(){

console.log('1111')

this.setData({

refresher:false

})

},

end(){

console.log('11222')

this.setData({

refresher:true

})

},

onRestore(e) {

console.log('onRestore:', e)

},

onAbort(e) {

console.log('onAbort', e)

},

})