小程序 scroll-view 下拉刷新

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>