scroll-view

Scrollable view area.

Attribute name Type Default Value Description
scroll-x Boolean false Allows horizontal scrolling
scroll-y Boolean false Allows vertical scrolling
upper-threshold Number 50 Defines the distance from the top/left side (unit: px) to trigger a scrolltoupper event
lower-threshold Number 50 Defines the distance from the bottom/right side (unit: px) to trigger a scrolltolower event
scroll-top Number Set the position of the vertical scroll bar position
scroll-left Number Set the position of the horizontal scroll bar
scroll-into-view String The value should be the ID of a sub-element (ID cannot begin with a number). It is used to set which direction can be scrolled in and which direction scrolls to the element
scroll-with-animation Boolean false Use animated transitions when setting the scrollbar's position
enable-back-to-top Boolean false Taping on the top status bar (iOS) or double tapping on the title bar (Android) enables the scroll bar return to the top. Only vertical scrolling is supported
bindscrolltoupper EventHandle Scrolling to the top/left side triggers a scrolltoupper event
bindscrolltolower EventHandle Scrolling to the bottom/right side triggers a scrolltolower event
bindscroll EventHandle Triggered when scrolling; event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

When using vertical scrolling, <scroll-view/> must be assigned a fixed height. Use WXSS to set a height.

Sample code:

<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 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: Do not use components textarea, map, canvas, or video in scroll-view
  2. tip: The priority of scroll-into-view is higher than scroll-top
  3. tip: Scrolling in the scroll-view may prevent the page from rebounding. Therefore, scrolling in the scroll-view cannot trigger onPullDownRefresh
  4. tip: If you want to use pull down refresh, use page scrolling instead of scroll-view. This allows users to return to the top of the page by tapping on the top of the status bar.

个结果 ""

    没有找到相关内容 ""