微信小程序可滾動(dòng)視圖區(qū)域scroll-view,scroll-view可滾動(dòng)視圖區(qū)域

2017-12-22

導(dǎo)讀：scroll-view 可滾動(dòng)視圖區(qū)域。屬性名類型默認(rèn)值說明 scroll-x Boolean false 允許橫向滾動(dòng) scroll-y Boolean false 允許縱向滾動(dòng) upper-threshold Number 50 距頂部/左邊多遠(yuǎn)時(shí)（單位px），觸發(fā) scrolltoup...

scroll-view

可滾動(dòng)視圖區(qū)域。

屬性名	類型	默認(rèn)值	說明
scroll-x	Boolean	false	允許橫向滾動(dòng)
scroll-y	Boolean	false	允許縱向滾動(dòng)
upper-threshold	Number	50	距頂部/左邊多遠(yuǎn)時(shí)（單位px），觸發(fā) scrolltoupper 事件
lower-threshold	Number	50	距底部/右邊多遠(yuǎn)時(shí)（單位px），觸發(fā) scrolltolower 事件
scroll-top	Number		設(shè)置豎向滾動(dòng)條位置
scroll-left	Number		設(shè)置橫向滾動(dòng)條位置
scroll-into-view	String		值應(yīng)為某子元素id（id不能以數(shù)字開頭）。設(shè)置哪個(gè)方向可滾動(dòng)，則在哪個(gè)方向滾動(dòng)到該元素
scroll-with-animation	Boolean	false	在設(shè)置滾動(dòng)條位置時(shí)使用動(dòng)畫過渡
enable-back-to-top	Boolean	false	iOS點(diǎn)擊頂部狀態(tài)欄、安卓雙擊標(biāo)題欄時(shí)，滾動(dòng)條返回頂部，只支持豎向
bindscrolltoupper	EventHandle		滾動(dòng)到頂部/左邊，會(huì)觸發(fā) scrolltoupper 事件
bindscrolltolower	EventHandle		滾動(dòng)到底部/右邊，會(huì)觸發(fā) scrolltolower 事件
bindscroll	EventHandle		滾動(dòng)時(shí)觸發(fā)，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

使用豎向滾動(dòng)時(shí)，需要給<scroll-view/>一個(gè)固定高度，通過 WXSS 設(shè)置 height。

示例代碼：

<view class="section">
  <view class="section__title">vertical scroll</view>
  <scroll-view scroll-y 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>
</view>
<view class="section section_gap">
  <view class="section__title">horizontal scroll</view>
  <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
    <view id="green" class="scroll-view-item_H bc_green"></view>
    <view id="red"  class="scroll-view-item_H bc_red"></view>
    <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
    <view id="blue" class="scroll-view-item_H bc_blue"></view>
  </scroll-view>
</view>

var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
  data: {
    toView: 'red',
    scrollTop: 100
  },
  upper: function(e) {
    console.log(e)
  },
  lower: function(e) {
    console.log(e)
  },
  scroll: function(e) {
    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
    })
  }
})

Bug & Tip

tip: 請勿在scroll-view中使用textarea、map、canvas、video組件
tip: scroll-into-view的優(yōu)先級高于scroll-top
tip: 在滾動(dòng)scroll-view時(shí)會(huì)阻止頁面回彈，所以在scroll-view中滾動(dòng)，是無法觸發(fā)onPullDownRefresh
tip: 若要使用下拉刷新，請使用頁面的滾動(dòng)，而不是scroll-view，這樣也能通過點(diǎn)擊頂部狀態(tài)欄回到頁面頂部

更多微信小程序開發(fā)教程，可以關(guān)注hi小程序。

第二部分：如何開通一個(gè)小商店