init

xhs-mini-demos/component-case/scroll-view/scroll-view.xhsml

@@ -0,0 +1,66 @@
+<view class="container">
+
+
+  <showbox title="swiper 嵌套 scroll-view">
+    <box>
+      <swiper>
+        <swiper-item>
+          <scroll-view catchtouchmove="()=>{}" class="scroll-view" scroll-x bindscrolltoupper="toLeft"
+            bindscrolltolower="toRight" model:scroll-left="{{ scrollLeft }}" upper-threshold="1" lower-threshold="1"
+            bindscroll="scroll">
+            <view id="four" class="color-a row-view">A</view>
+            <view id="five" class="color-b row-view">B</view>
+            <view id="six" class="color-c row-view">C</view>
+          </scroll-view>
+        </swiper-item>
+        <swiper-item>
+          <scroll-view catchtouchmove="()=>{}" class="scroll-view" scroll-x bindscrolltoupper="toLeft" bindscrolltolower="toRight"
+            model:scroll-left="{{ scrollLeft }}" upper-threshold="1" lower-threshold="1" bindscroll="scroll">
+            <view id="four" class="color-a row-view">A</view>
+            <view id="five" class="color-b row-view">B</view>
+            <view id="six" class="color-c row-view">C</view>
+          </scroll-view>
+        </swiper-item>
+      </swiper>
+    </box>
+  </showbox>
+
+  <showbox title="纵向滚动">
+    <box>
+      <scroll-view class="scroll-view" scroll-y upper-threshold="1" lower-threshold="1" scroll-top="{{ scrollTop }}"
+        scroll-into-view="{{ scrollIntoView }}" scroll-with-animation="true" enable-back-to-top="true"
+        bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
+        <view id="one" class="color-a">A</view>
+        <view id="two" class="color-b">B</view>
+        <view id="three" class="color-c">C</view>
+      </scroll-view>
+      <view class="page-section-btns">
+        <view class="next-page" bindtap="tap">下一页</view>
+        <view bindtap="tapMove">滚动</view>
+        <view class="scroll-to-top" bindtap="scrollToTop">回顶部</view>
+      </view>
+    </box>
+  </showbox>
+
+  <showbox title="横向滚动">
+    <box>
+      <scroll-view class="scroll-view" scroll-x bindscrolltoupper="toLeft" bindscrolltolower="toRight"
+        model:scroll-left="{{ scrollLeft }}" upper-threshold="1" lower-threshold="1" bindscroll="scroll">
+        <view id="four" class="color-a row-view">A</view>
+        <view id="five" class="color-b row-view">B</view>
+        <view id="six" class="color-c row-view">C</view>
+      </scroll-view>
+    </box>
+  </showbox>
+
+  <showbox title="下拉刷新">
+    <box>
+      <scroll-view class="scroll-view" scroll-y refresher-enabled refresher-triggered="{{ refresherTriggered }}"
+        bindrefresherrefresh="onRefresh" bindrefresherrestore="onRestore">
+        <view class="color-a">A</view>
+        <view class="color-b">B</view>
+        <view class="color-c">C</view>
+      </scroll-view>
+    </box>
+  </showbox>
+</view>