scroll-view

基础库 1.0.0 开始支持本组件。

可滚动视图区域,可实现横向滚动和竖向滚动。使用竖向滚动时,需要给定一个固定高度,可以通过 ttss 来设置 height。


属性说明

属性类型默认值必填说明最低支持版本
scroll-xbooleanfalse设置为横向滚动1.0.0
scroll-ybooleanfalse设置为竖向滚动1.0.0
upper-thresholdnumber50距顶部/左边多远时(单位 px),触发 scrolltoupper 事件1.0.0
lower-thresholdnumber50距底部/右边多远时(单位 px),触发 scrolltolower 事件1.0.0
scroll-topnumber设置竖向滚动条位置1.0.0
scroll-leftnumber设置横向滚动条位置1.0.0
scroll-into-viewstring值应为某子元素 id(id 不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素1.0.0
scroll-with-animationbooleanfalse在设置滚动条位置时使用动画过渡1.0.0
bindscrolleventhandle滚动时触发1.0.0
bindscrolltouppereventhandle滚动到顶部/左边1.0.0
bindscrolltolowereventhandle滚动到底部/右边1.0.0


效果示例


代码示例

<view class="page-section-title">
  <text>Vertical Scroll\n纵向滚动</text>
</view>

<scroll-view
  style="height: 300rpx;"
  scroll-y
  scroll-with-animation
  bindscrolltoupper="upper"
  bindscrolltolower="lower"
  bindscroll="scroll"
  scroll-into-view="{{toView}}"
  scroll-top="{{scrollTop}}"
>
  <view id="demo1" class="scroll-view-item demo-text-1"></view>
  <view id="demo2" class="scroll-view-item demo-text-2"></view>
  <view id="demo3" class="scroll-view-item demo-text-3"></view>
</scroll-view>

<button bindtap="tap">Scroll into</button>
<button bindtap="tapMove">Move</button>

<view class="page-section-title">
  <text>Horizontal Scroll\n横向滚动</text>
</view>

<scroll-view class="scroll-view_H" scroll-x style="width: 100%">
  <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
  <view id="demo2" class="scroll-view-item_H demo-text-2"></view>
  <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
</scroll-view>
var order = ["demo1", "demo2", "demo3"];
Page({
  data: {
    toView: "demo1",
    scrollTop: 0
  },
  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 < order.length - 1 ? i + 1 : 0]
        });
        break;
      }
    }
  },
  tapMove: function(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 20
    });
  }
});


Bug & Tip

  • Tip: 在 iOS13.1 中,使用 bindscrolltolower 事件向 scroll-view 组件中添加子元素时,该组件会回到 scrollTop 为 0 的位置。将 scroll-view 组件的全部子元素包裹一层 view 可避免该问题。
  • Tip: 在 scroll-view 中滚动无法触发 onPullDownRefresh。
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部