scroll-view

优质

小牛编辑

137浏览

2023-12-01

scroll-view

可滚动视图区域。

属性名	类型	默认值	说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	Number	50	距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top	Number		设置竖向滚动条位置
scroll-left	Number		设置横向滚动条位置
scroll-into-view	String		值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	Boolean	false	在设置滚动条位置时使用动画过渡
enable-back-to-top	Boolean	false	iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
bindscrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件
bindscroll	EventHandle		滚动时触发，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

tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
tip: scroll-into-view 的优先级高于 scroll-top
tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh