JS
const app = getApp()
Page({
data: {
arr: [],
triggered: false,
},
onReady: function () {
const arr = []
for (let i = 0; i < 100; i++) arr.push(i)
this.setData({
arr
})
setTimeout(() => {
this.setData({
triggered: true,
})
}, 1000)
},
onPulling(e) {
console.log('onPulling:', e);
console.log("onPulling刷新了")
},
onRefresh() {
if (this._freshing) return
this._freshing = true
setTimeout(() => {
this.setData({
triggered: false,
})
this._freshing = false
}, 3000)
},
onRestore(e) {
console.log('onRestore:', e)
console.log("onRestore刷新了")
},
onAbort(e) {
console.log('onAbort', e)
console.log("onAbort刷新了")
},
})
HTML
<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="{{true}}"
refresher-threshold="{{80}}"
refresher-default-style="none"
refresher-background="lightgreen"
bindrefresherpulling="{{refresh.onPulling}}"
>
<view slot="refresher" class="refresh-container"
style="display: block; width: 100%; height: 80px; background: #fff; display: flex; align-items: center;"
>
<view class="view1" style="position: absolute; text-align: center; width: 100%;">
下拉刷新
</view>
</view>
<view wx:for="{{arr}}" style="display: flex; height: 100px;">
<image 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>
默认交互动画:
<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 wx:for="{{arr}}" style="display: flex; height: 100px;">
<image 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>