使用组件<scroll-view></scroll-view>
参考:微信开放文档:scroll-view,在开发者工具中预览效果,demo里啥都有
默认交互动画:
wxml
<scroll-view
scroll-y style="width: 100%; height: 400px;"
refresher-enabled="{{true}}"
refresher-threshold="{{100}}"
refresher-default-style="white"
refresher-background="lightgreen"
refresher-triggered="{{triggered}}"
bindrefresherpulling="onPulling"
bindrefresherrefresh="onRefresh"
bindrefresherrestore="onRestore"
bindrefresherabort="onAbort"
>
<view></view>
</scroll-view>
js
Page({
data: {
triggered: false,
},
onReady: function () {
},
onPulling(e) {
console.log('onPulling:', e)
},
onRefresh() {
if (this._freshing) return
this._freshing = true
setTimeout(() => {
this.setData({
triggered: false,
})
this._freshing = false
}, 3000)
},
onRestore(e) {
console.log('onRestore:', e)
},
onAbort(e) {
console.log('onAbort', e)
},
})