小程序開發基礎-scroll-view 可滾動視圖區域

小編 / 達叔小生

小程序開發基礎-scroll-view 可滾動視圖區域

這里只展示縱向滾動，橫向同理就不用說明了，可自己嘗試，橫向滾動屬性為scroll-x，把縱向滾動改為橫向滾動即可。

scroll-view視圖組件

scroll-y是scroll-view的屬性，scroll-y類型為Boolean，默認值為false，表示允許縱向滾動，scroll-y="true"允許縱向滾動

bindscrolltoupper是scroll-view的屬性，bindscrolltoupper類型為EventHandle，表示滾動到頂部/左邊，會觸發scrolltoupper事件，頂部/左邊，是因為滾動視圖可以橫向滾動和縱向滾動，bindscrolltoupper="upper"定義綁定事件，在邏輯代碼中編寫，滾動到頂部，觸發scrolltoupper事件。

bindscrolltolower是scroll-view屬性，與上述bindscrolltoupper同理，bindscrolltolower的類型也是EventHandle，bindscrolltolower表示滾動到底部/右邊，會觸發scrolltolower事件，bindscrolltolower="lower"表示綁定事件lower，會觸發scrolltolower事件。

bindscroll是scroll-view屬性，類型是EventHandle，表示滾動觸發，與上述bindscrolltoupper屬性和bindscrolltolower屬性范圍廣，bindscroll滾動觸發，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}。

在定義scroll-view時，要給它一個固定的高度，通過wxss也可以內部樣式，給設置個height屬性，如style="height:200px;"。

scroll-into-view為scroll-view的屬性，類型為String類型，表示值應為某子元素的id，甚至哪個方向可滾動，則在哪個方向滾動到該元素。代碼中scroll-into-view="{{toView}}"，toView的值到js中的data中。

scroll-top為scroll-view的屬性，類型為Number類型，表示值應為設置豎向滾動條位置，同時橫向有個scroll-left屬性。

<!-- index.wxml -->
<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
 ...
</scroll-view>

給這個視圖組件加幾個視圖，一個視圖高度以給定"height:200px"

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

再給兩個按鈕，一個是點擊效果為，下一個視圖，如同翻頁的效果，點擊按鈕切換到下一個view，另一個按鈕的點擊效果為，設置滾動條位置實現畫面滾動，就是下移或上移等。

click me to scroll into view為點擊我跳轉到下一個view視圖
click me to scroll為點擊我進行滾動

<!-- index.wxml -->
<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">
  <button size="mini" bindtap="tap">click me to scroll into view </button>
  <button size="mini" bindtap="tapMove">click me to scroll</button>
</view>

scroll-view屬性表格

屬性名	說明
scroll-x	表示允許橫向滾動
scroll-y	表示允許縱向滾動
upper-threshold	表示距頂部或者左邊多遠時（單位為px），觸發scrolltoupper事件
lower-threshold	表示距底部或者右邊多遠時時（單位為px），觸發scrolltolower事件
scroll-top	表示設置豎向滾動條位置
scroll-left	表示設置橫向滾動條位置
scroll-into-view	表示指應為某子元素id（id不能以數字開頭），設置哪個方向可滾動，則在哪個方向滾動到該元素
scroll-with-animation	表示在設置滾動條位置時使用動畫過渡
bindscrolltoupper	表示滾動到頂部或左邊，會觸發scrolltoupper事件
bindscrolltolower	表示滾動到底部或右邊，會觸發scrolltolower事件
bindscroll	表示滾動時觸發
enable-back-to-top	表示iOS點擊頂部狀態欄、安卓雙擊標題欄時，滾動條返回頂部，只支持豎向

class="scroll-view-item bc_green"中，在wxss樣式定義，高度為200px，如果沒有就不會出現，你可以自己試試，margin屬性定義，四周都是10px，其它為背景顏色而已。

/* index.wxss */
/* .scroll-view_H{
  white-space: nowrap;
} */
.scroll-view-item{
  height: 200px;
}
/* .scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 200px;
} */

.btn-area button{
  margin: 10px;
}



.bc_green {
  background-color: green;
}

.bc_red {
  background-color: red;
}

.bc_yellow {
  background-color: yellow;
}

.bc_blue {
  background-color: blue;
}

邏輯index.js，upper為滾動條滾到頂部的時候觸發，lower為滾動條滾到底部的時候觸發，scroll為滾動條滾動后觸發，tap為點擊按鈕切換到下一個view，tapMove為通過設置滾動條位置實現畫面滾動。

// index.js
var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
  data: {
    toView: 'green',
    scrollTop: 100,
    scrollLeft: 0
  },
  // 滾動條滾到頂部的時候觸發
  upper: function(e) {
    console.log(e)
  },
  // 滾動條滾到底部的時候觸發
  lower: function(e) {
    console.log(e)
  },
  // 滾動條滾動后觸發
  scroll: function(e) {
    console.log(e)
  },
  // 點擊按鈕切換到下一個view
  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
    })
  }
})

toView: 'green',為scroll-into-view顯示在green綠色的地方，在index.wxml中的scroll-into-view="{{toView}}"，scrollTop: 100,為scroll-top="{{scrollTop}}"在顯示時就是綠色的占一半，紅色的占一半，因為總的才200px嘛。

scroll-top的用途說明一下，為甚至豎向滾動條位置。scroll-into-view為滾動到該元素，簡要的說。總的來說，值應為某子元素id（id不能以數字開頭）。設置哪個方向可滾動，則在哪個方向滾動到該元素，可知道要id，所以在index.wxml中有了<view id="green" class="scroll-view-item bc_green"></view>這個描述，里面的id="green"。

這樣就可以理解以下代碼：

  data: {
    toView: 'green',
    scrollTop: 100,
    scrollLeft: 0
  },
// scrollLeft:是用來橫向的嘛

var order = ['red', 'yellow', 'blue', 'green', 'red']
  // 點擊按鈕切換到下一個view
  tap: function(e) {
    for (var i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },

重要事項：

開源github分享

Wechat_small_program_Share
微信小程序分享🙈
Github 歡迎 Star、Fork

結語

• 本文主要講解 小程序開發基礎-scroll-view 可滾動視圖區域
• 下面我將繼續對其他知識 深入講解 ，有興趣可以繼續關注
• 小禮物走一走 or 點贊