微信小程序學習（二）之scroll-view組件

一、效果

二、代碼

<!--學習scroll-view組件-->
<view class="title">學習scroll-view組件</view>
<view class="student">2016/11/24 [email protected]</view>
<view>
    <text>\n
    1、使用豎向滾動時，需要給scroll-view一個固定高度，通過 WXSS 設置 height。
    2、scroll-into-view意思是滾動到某一個ID元素頂部，類似錨點效果。
    3、bindscrolltoupper表示滾動到頂部觸發回調。
    4、bindscrolltolower表示滾動到頂部觸發回調。
    5、bindscroll表示滾動時觸發回調。
    6、scroll-into-view比bindscroll優先級高。
    \n\n</text>
</view>
<view class="section">
  <view class="section__title">垂直滾動</view>
  <!--垂直滾動，這裏必須設置高度-->
  <scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
    <view id="green" class="scroll-view-item bc_green"></view>
    <view id="red"  class="scroll-view-item bc_red"></view>
    <view id="yellow" class="scroll-view-item bc_yellow"></view>
    <view id="blue" class="scroll-view-item bc_blue"></view>
  </scroll-view>

  <view class="btn-area"><text>\n</text>
    <button size="mini" bindtap="tap">click me to scroll into view </button>
    <button size="mini" bindtap="tapMove">click me to scroll</button>
  </view>
</view>
<view class="section section_gap"><text>\n\n</text>
  <view class="section__title">水平滾動</view>
  <!--scroll-view_H這裏必須強制在一行white-space:nowrap否則無法滾動-->
  <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%;" bindscrolltoupper="upper2" bindscrolltolower="lower2" bindscroll="scroll" scroll-into-view="{{toView2}}" scroll-top="{{scrollTop2}}">
    <view id="green2" class="scroll-view-item_H bc_green"></view>
    <view id="red2"  class="scroll-view-item_H bc_red"></view>
    <view id="yellow2" class="scroll-view-item_H bc_yellow"></view>
    <view id="blue2" class="scroll-view-item_H bc_blue"></view>
  </scroll-view>
</view>
<text>
\n\n\n\n\n
</text>
<!--  white-space樣式屬性
  normal: 正常無變化(默認處理方式.文本自動處理換行.假如抵達容器邊界內容會轉到下一行)
  pre: 保持HTML源代碼的空格與換行,等同與pre標籤
  nowrap: 強制文本在一行,除非遇到br換行標籤
  pre-wrap: 同pre屬性,但是遇到超出容器範圍的時候會自動換行
  pre-line: 同pre屬性,但是遇到連續空格會被看作一個空格
  inherit: 繼承
-->
<!--參考：/u014360817/article/details/52658760-->

var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
    data: {
        toView: 'red',
        scrollTop: 0 //移動步長
    },
    //滾動到頂部觸發
    upper: function(e) {
        console.log('滾到頂部了！')
        console.log(e)
    },
    //滾動到左邊沿觸發
    upper2: function(e) {
        console.log('滾到左邊沿了！')
        console.log(e)
    },
    //滾動到底部觸發
    lower: function(e) {
        console.log('滾到底部了！')
        console.log(e)
    },
    //滾動到右邊沿觸發
    lower2: function(e) {
        console.log('滾到右邊沿了！')
        console.log(e)
    },
    //滾動過程中觸發
    scroll: function(e) {
        console.log('我在滾動中！')
        console.log(e)
    },
    //實現循環滾動
    tap: function(e) {
        for (var i = 0; i < order.length; ++i) {
            if (order[i] === this.data.toView) {
                this.setData({
                    toView: order[i + 1]
                })
                break
            }
        }
    },
    //規定步長滾動
    tapMove: function(e) {
        this.setData({
            scrollTop: this.data.scrollTop + 10
        })
    }
})