微信小程序中scroll-view怎么用

這篇文章主要為大家展示了“微信小程序中scroll-view怎么用”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“微信小程序中scroll-view怎么用”這篇文章吧。

scroll-view

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

使用豎向滾動時(shí)，需要給<scroll-view/>一個固定高度，通過 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

1. tip: 請勿在scroll-view中使用textarea、map、canvas、video組件

2. tip: scroll-into-view的優(yōu)先級高于scroll-top

3. tip: 在滾動scroll-view時(shí)會阻止頁面回彈，所以在scroll-view中滾動，是無法觸發(fā)onPullDownRefresh

4. tip: 若要使用下拉刷新，請使用頁面的滾動，而不是scroll-view，這樣也能通過點(diǎn)擊頂部狀態(tài)欄回到頁面頂部

以上是“微信小程序中scroll-view怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！