init

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

@@ -0,0 +1,93 @@
+.scroll-view {
+  height: 1.66rem;
+  white-space: nowrap;
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+}
+
+.color-a,
+.color-b,
+.color-c {
+  height: 1.66rem;
+  line-height: .16rem;
+  text-align: center;
+  font-size: .16rem;
+  color: #fff;
+  /* 兼容适老版，文字垂直居中 */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.color-a {
+  background-color: rgb(255, 36, 65);
+}
+.color-b {
+  background-color: rgba(255, 36, 66, 0.7);
+}
+.color-c {
+  background-color: rgba(255, 36, 66, 0.5);
+}
+
+.row-view {
+  display: inline-block !important;
+  width: 100%;
+  height: 1.66rem;
+  line-height: 1.66rem;
+}
+
+.page-section-btns {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin: 0 .23rem;
+}
+
+.page-section-btns > view {
+  flex: 1;
+  height: .28rem;
+  width: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  color: #ff2442;
+  border: .007rem solid #ff2442;
+  border-radius: .05rem;
+  margin: .1rem .14rem;
+}
+
+.scroll-to-top {
+  border-right: 1px solid #ddd;
+}
+
+.next-page {
+  border-left: 1px solid #ddd;
+}
+
+
+.horizontal-rolling {
+  height: 2.5rem;
+}
+
+.arrange {
+  display: flex;
+}
+
+.scroll-item {
+  padding: .17rem .17rem;
+  height: 2.5rem;
+}
+
+.scroll-image {
+  width: 1.3rem;
+  height: 1.3rem;
+  border-radius: .15rem;
+}
+
+/* 隐藏 scroll-view 的滚动条  */
+/* ::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+} */

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

@@ -0,0 +1,120 @@
+/**
+ * @file demo component for scroll-view
+ * @author sunbai
+ */
+/* global Page, xhs, getApp */
+
+let app = getApp();
+const order = ['one', 'two', 'three'];
+
+
+Page({
+  data: {
+    scrollIntoView: 'one',
+    scrollTop: 0,
+    scrollLeft: 0,
+    /* eslint-disable max-len */
+    scrollList: [{
+      src: 'https://b.bdstatic.com/miniapp/image/young.jpeg',
+      description: '【少年的你】：影片简介：陈念是一名即将参加高考的高三学生，同校女生胡晓蝶的跳楼自杀让她的生活陷入了困顿之中。胡晓蝶死后，陈念遭到了以魏莱为首的三人组的霸凌，魏莱虽然表面上看来是乖巧的优等生，实际上却心思毒辣，胡晓蝶的死和她有着千丝万缕的联系。一次偶然中，陈念邂逅了名为小北的小混混...'
+    }, {
+      src: 'https://b.bdstatic.com/miniapp/image/airCaptain.jpeg',
+      description: '【中国机长】根据2018年5月14日四川航空3U8633航班机组成功处置特情真实事件改编。机组执行航班任务时，在万米高空突遇驾驶舱风挡玻璃爆裂脱落、座舱释压的极端罕见险情，生死关头，他们临危不乱、果断应对、正确处置，确保了机上全部人员的生命安全，创造了世界民航史上的奇迹'
+    }, {
+      src: 'https://b.bdstatic.com/miniapp/image/young.jpeg',
+      description: '【催眠.裁决】轰动全港的林氏家族凶杀案踏入审讯最后一天，陪审团准备退庭商议时，成员之一许立生突然收到女儿茵茵被绑架的消息，神秘人要求曾为国际催眠权威的立生通过催眠术令陪审团裁定被告谋杀罪名成立，否则其女儿将被撕票，这也就意味着立生必须在狭小的空间内、众目睽睽之下，不用专业工具隐秘地催眠至少4个人。立生偷偷将茵茵被绑架的讯息转发给曾为国内特种部队成员的小舅杨凯后，进入了退庭商议室…'
+    }],
+    refresherTriggered: false,
+    /* eslint-enable max-len */
+  },
+  onHide() {
+    app.globalData.openParams = '';
+  },
+  toLeft() {
+    xhs.showToast({
+      title: '到最左边了',
+      icon: 'none'
+    });
+  },
+  toRight() {
+    xhs.showToast({
+      title: '到最右边了',
+      icon: 'none'
+    });
+  },
+  upper() {
+    xhs.showToast({
+      title: '到顶了',
+      icon: 'none'
+    });
+  },
+
+  lower() {
+    xhs.showToast({
+      title: '到底了',
+      icon: 'none'
+    });
+  },
+
+  scroll(e) {
+    console.log('获取滚动事件的详细信息e.detail：', e.detail);
+    // 此处只做对scrollTop值的监听，不需要使用setData对视图层发起更新
+    this.data.scrollTop = e.detail.scrollTop;
+  },
+  scrollToTop(e) {
+    console.log(e);
+    this.setData({
+      scrollTop: 0
+    });
+  },
+  tap(e) {
+    for (let i = 0; i < order.length; ++i) {
+      if (order[i] === this.data.scrollIntoView) {
+        const next = (i + 1) % order.length;
+        this.setData({
+          scrollIntoView: order[next],
+          scrollTop: next * 500
+        });
+        break;
+      }
+    }
+  },
+  tapMove() {
+    this.setData({
+      scrollTop: this.data.scrollTop + 10
+    });
+  },
+
+  handleStartRefresh() {
+    this.setData({
+      refresherTriggered: true
+    }),
+
+    setTimeout(() => {
+      this.handleStopRefresh();
+    }, 2000);
+
+    console.log('start refresh', this.data.refresherTriggered);
+  },
+
+  handleStopRefresh() {
+    this.setData({
+      refresherTriggered: false
+    });
+    console.log('stop refresh', this.data.refresherTriggered);
+  },
+
+  onRefresh() {
+    xhs.showToast({
+      title: '刷新成功',
+    });
+
+    this.handleStartRefresh();
+  },
+
+  onRestore() {
+    xhs.showToast({
+      title: '刷新恢复',
+    });
+  }
+});

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

@@ -0,0 +1,8 @@
+{
+    "navigationBarTitleText": "可滚动视图区域",
+    "pageOrientation": "auto",
+    "usingComponents": {
+        "showbox": "../../common/component/showbox/index",
+        "box": "../../common/component/container/index"
+    }
+}

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>