AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-02-06 11:11:42

可滚动视图区域scroll-view详解-视图容器-微信小程序组件-微信 小程序开发教程


scroll-view

可滚动视图区域。

属性名类型默认值说明
scroll-xBooleanfalse允许横向滚动
scroll-yBooleanfalse允许纵向滚动
upper-thresholdNumber50距顶部/左边多远时(单位px),触发 scrolltoupper 事件
lower-thresholdNumber50距底部/右边多远时(单位px),触发 scrolltolower 事件
scroll-topNumber
设置竖向滚动条位置
scroll-leftNumber
设置横向滚动条位置
scroll-into-viewString
值应为某子元素id,则滚动到该元素,元素顶部对齐滚动区域顶部
bindscrolltoupperEventHandle
滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolowerEventHandle
滚动到底部/右边,会触发 scrolltolower 事件
bindscrollEventHandle
滚动时触发,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

Bug & Tip

  1. tip: 请勿在 scroll-view 中使用 textareamapcanvasvideo 组件

  2. tipscroll-into-view 的优先级高于 scroll-top

  3. tip: 在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh

  4. tip: 若要使用下拉刷新,请使用页面的滚动,而不是 scroll-view ,这样也能通过点击顶部状态栏回到页面顶部

扩展阅读:

微信 小程序开发组件:视图容器view,scroll-view,swiper-微信 小程序开发教程

视图容器view详解-视图容器-微信小程序组件-微信 小程序开发教程

可滚动视图区域scroll-view详解-视图容器-微信小程序组件-微信 小程序开发教程

滑块视图容器swiper详解-视图容器-微信小程序组件-微信 小程序开发教程


167阅读 | 0评论
你的回应
写文章

1481