亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序 教程之wxapp視圖容器 scroll-view

 更新時間:2016年10月19日 15:40:22   投稿:lqh  
這篇文章主要介紹了微信小程序 教程之wxapp視圖容器 scroll-view的相關資料,需要的朋友可以參考下

相關文章:

  1. 微信小程序 教程之wxapp視圖容器 swiper
  2. 微信小程序 教程之wxapp視圖容器 scroll-view
  3. 微信小程序 教程之wxapp 視圖容器 view

scroll-view

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

屬性名 類型 默認值 說明
scroll-x Boolean false 允許橫向滾動
scroll-y Boolean false 允許縱向滾動
upper-threshold Number 50 距頂部/左邊多遠時(單位px),觸發(fā) scrolltoupper 事件
lower-threshold Number 50 距底部/右邊多遠時(單位px),觸發(fā) scrolltolower 事件
scroll-top Number   設置豎向滾動條位置
scroll-left Number   設置橫向滾動條位置
scroll-into-view String   值應為某子元素id,則滾動到該元素,元素頂部對齊滾動區(qū)域頂部
bindscrolltoupper EventHandle   滾動到頂部/左邊,會觸發(fā) scrolltoupper 事件
bindscrolltolower EventHandle   滾動到底部/右邊,會觸發(fā) scrolltolower 事件
bindscroll EventHandle   滾動時觸發(fā),event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

使用豎向滾動時,需要給<scroll-view/>一個固定高度,通過 WXSS 設置 height。

示例代碼:

<view class="section">
 <view class="section__title">vertical scroll</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">
 <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
 })
 }
})
scroll-view

感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!

相關文章

最新評論