scroll-view

优质
小牛编辑
129浏览
2023-12-01

scroll-view

可滚动视图区域。

属性名类型默认值说明
scroll-xBooleanfalse允许横向滚动
scroll-yBooleanfalse允许纵向滚动
upper-thresholdNumber50距顶部/左边多远时(单位px),触发 scrolltoupper 事件
lower-thresholdNumber50距底部/右边多远时(单位px),触发 scrolltolower 事件
scroll-topNumber设置竖向滚动条位置
scroll-leftNumber设置横向滚动条位置
scroll-into-viewString值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
scroll-with-animationBooleanfalse在设置滚动条位置时使用动画过渡
enable-back-to-topBooleanfalseiOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向
bindscrolltoupperEventHandle滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolowerEventHandle滚动到底部/右边,会触发 scrolltolower 事件
bindscrollEventHandle滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 JXSS 设置 height。

示例代码

<!--scroll-view.jxml-->
    <view class="section ">
        <view class="section-title">
                <text>纵向滑动 scroll-y</text>
            </view>
      <view class="">
        <scroll-view
          style="height: 300rpx;"
          scroll-y
          bindscrolltoupper="upper"
          bindscrolltolower="lower"
          bindscroll="scroll"
        >
          <view class="scroll-view_H">
            <view id="A1" class="scroll-view-item_H scroll-1">A1</view>
            <view id="A2" class="scroll-view-item_H scroll-2">A2</view>
            <view id="A3" class="scroll-view-item_H scroll-3">A3</view>
          </view>
          <view class="scroll-view_H">
            <view id="B1" class="scroll-view-item_H scroll-2">B1</view>
            <view id="B2" class="scroll-view-item_H scroll-3">B2</view>
            <view id="B3" class="scroll-view-item_H scroll-1">B3</view>
          </view>
          <view class="scroll-view_H">
            <view id="C1" class="scroll-view-item_H scroll-3">C1</view>
            <view id="C2" class="scroll-view-item_H scroll-1">C2</view>
            <view id="C3" class="scroll-view-item_H scroll-2">C3</view>
          </view>
        </scroll-view>
      </view>
    </view>
      <view class="section section-vertical-spacing">
          <view class="section-title">
                <text>横向滑动 scroll-x</text>
               </view>
      <view class="section-spacing">
        <scroll-view
          style="height: 300rpx;"
          scroll-x
          bindscrolltoupper="upper"
          bindscrolltolower="lower"
          bindscroll="scroll"
        >
          <view class="scroll-view_H">
            <view id="A1" class="scroll-view-item_H scroll-1">A1</view>
            <view id="A2" class="scroll-view-item_H scroll-2">A2</view>
            <view id="A3" class="scroll-view-item_H scroll-3">A3</view>
          </view>
          <view class="scroll-view_H">
            <view id="B1" class="scroll-view-item_H scroll-2">B1</view>
            <view id="B2" class="scroll-view-item_H scroll-3">B2</view>
            <view id="B3" class="scroll-view-item_H scroll-1">B3</view>
          </view>
          <view class="scroll-view_H">
            <view id="C1" class="scroll-view-item_H scroll-3">C1</view>
            <view id="C2" class="scroll-view-item_H scroll-1">C2</view>
            <view id="C3" class="scroll-view-item_H scroll-2">C3</view>
          </view>
        </scroll-view>
      </view>
    </view>
Bug & Tip
  1. tip: 请勿在 scroll-view 中使用 textareamapcanvasvideo 组件
  2. tip: scroll-into-view 的优先级高于 scroll-top
  3. tip: 在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh