小程序 scroll-view 下拉刷新

╰半夏微凉° 2023-03-14 10:48 3阅读 0赞

## JS ##

## 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>