combination/miniprogram/packageComponent/pages/view/scroll-view/scroll-view.wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container page" data-weui-theme="{{theme}}">
  <template is="head" data="{{title: 'scroll-view'}}"/>

  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">
        <text>Vertical Scroll\n纵向滚动</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view scroll-y="true" style="height: 150px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
          <view id="demo1" class="scroll-view-item demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item demo-text-2"></view>
          <view id="demo3" class="scroll-view-item demo-text-3"></view>
        </scroll-view>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">
        <text>Horizontal Scroll\n横向滚动</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
          <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item_H demo-text-2"></view>
          <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
        </scroll-view>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">
        <text>自定义下拉刷新\n自定义：</text>
      </view>
      <view class="page-section-spacing">
        <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: #ECBDF0; display: flex; align-items: center;"
          >
            <view class="view1" style="position: absolute; color: white; text-align: center; width: 100%;">
              下拉刷新
            </view>
          </view>

          <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item_H demo-text-2"></view>
          <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
        </scroll-view>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">
        <text>默认：</text>
      </view>
      <view class="page-section-spacing">
        <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 id="demo1" class="scroll-view-item_H demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item_H demo-text-2"></view>
          <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
        </scroll-view>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">
        <text>滚动驱动动画</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view id="scroll-view_D" scroll-y="true" style="height: 150px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
          <view class="scroll-view-item_H demo-text-1" id="scroll-sample-object1"></view>
          <view class="scroll-view-item_H demo-text-2" id="scroll-sample-object2"></view>
          <view class="scroll-view-item_H demo-text-3" id="scroll-sample-object3"></view>
        </scroll-view>
      </view>
    </view>
  </view>
  <template is="foot" />
</view>


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