跳到主要内容

滚动容器

ScrollView

使用说明

滚动容器可以实现页面或功能模块的滚动效果,当滚动容器内组件内容占用的总宽度/高度大于滚动容器本身的宽度/高度时,便会出现滚动条,通过滑动滚动条滑动来查看容器内的全部内容,示例如下:

  1. 拖入一个滚动容器组件,将高度设置为 300

  1. 在滚动容器中添加三个图片组件,每个图片组件的高度设为 200,这样容器内的组件高度便大于了容器本身的高度,滚动条出现。

属性介绍

组件接收的外部传入的属性

属性名
属性标识
类型
说明
滚动条显隐控制(小程序)showScrollbarboolean

控制滚动条是否显示/隐藏

示例:true

允许横向滚动scrollXboolean

开启后,将开启横向滚动条,组件支持左右滚动

示例:false

允许纵向滚动scrollYboolean

开启后,将开启纵向滚动条,组件支持上下滚动

示例:true

滚到的元素ID(WEB端)scrollIntoViewstring

小程序暂时不支持此特性

将当前的元素滚动到浏览器窗口的可视区域内

横向滚动条位置scrollLeftnumber

输入默认值,横向滚动条将默认移动到该位置

竖向滚动条位置scrollTopnumber

输入默认值,竖向滚动条将默认移动到该位置

距底部/右边多远时,触发scrolltolower事件lowerThresholdnumber

示例:50

距顶部/左边多远时,触发scrolltoupper事件upperThresholdnumber

示例:50

启用 scroll-view 增强特性(小程序)enhancedboolean

开启scroll-view增强特性

示例:false

iOS 下 scroll-view 边界弹性控制(小程序)bouncesboolean

示例:true

分页滑动效果(小程序)pagingEnabledboolean

示例:false

滑动减速速率控制(小程序)fastDecelerationboolean

示例:false

开启自定义下拉刷新(小程序)refresherEnabledboolean

开启后可自定义对下拉刷新进行相关配置

示例:false

设置自定义下拉刷新阈值(小程序)refresherThresholdnumber

示例:50

设置自定义下拉刷新默认样式(小程序)refresherDefaultStylestring

示例:"block"

设置自定义下拉刷新区域背景颜色(小程序)refresherBackgroundstring

示例:"#fff"

设置当前下拉刷新状态(小程序)refresherTriggeredboolean

示例:false

开启 scroll anchoring 特性(小程序)scrollAnchoringboolean

开启scroll-anchoring特性

示例:false

启用 flexbox 布局(小程序)enableFlexboolean

开启flexbox布局

示例:false

iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向(小程序)enableBackToTopboolean

开启后当执行对应操作后滚动条将自动返回顶部

示例:false

在设置滚动条位置时使用动画过渡(小程序)scrollWithAnimationboolean

开启滚动条动画

示例:false

事件介绍

组件暴露的事件,可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
滚动时触发scroll兼容三端

-

滚动到底部/右边时触发scrolltolower兼容三端

-

滚动到顶部/左边时触发scrolltoupper兼容三端

-

滑动开始事件(同时开启 enhanced 属性后生效)dragstart兼容三端

-

滑动事件(同时开启 enhanced 属性后生效)dragging兼容三端

-

滑动结束事件(同时开启 enhanced 属性后生效)dragend兼容三端

-

自定义下拉刷新控件被下拉refresherpulling兼容三端

-

自定义下拉刷新被触发refresherrefresh兼容三端

-

自定义下拉刷新被复位refresherrestore兼容三端

-

自定义下拉刷新被中止refresherabort兼容三端

-

常见问题

普通容器/网格布局/滚动容器的区别是什么?

普通容器/网格布局/滚动容器是微搭中常用的三种容器类型,它们的区别如下:

  • 普通容器:普通容器最基本的容器类型,用于承载页面中的文本、图片等内容。它可以嵌套其他组件,并可以通过设置样式实现不同的布局效果,默认没有滚动功能,内容如果没有设置高度,会自动撑开。类似于小程序的 View 和 Web 上的 div
  • 网格布局:网格布局是一种用于布局的容器,在普通容器等基础上拓展出灵活的布局功能,它将页面划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,例如左右布局,一行多列等,还可以支持多端展示不同的布局方式。
  • 滚动容器:滚动容器是一种带有滚动条的容器,设置宽高之后,内容如果超出容器范围,可以在容器内滚动内容。类似于小程序的 ScrollView

在实际开发中,推荐使用 网格布局 来进行整体页面以及内部模块的细节布局,如果有多端需求,可以设置多端的展示效果。如果有超出内容区域滚动的需求,可以使用滚动容器来实现。

如何实现局部滚动?

可以使用滚动容器来进行展示超出范围之后需要滚动的内容。

当滚动容器内组件内容占用的总宽度/高度大于滚动容器本身的宽度/高度时,便会出现滚动条,通过滑动滚动条滑动来查看容器内的全部内容。

注意要为滚动容器设置宽高,确保内部展示内容的宽高大于滚动容器,才可以展示滚动效果。

如果只需要横向滚动,需要确保滚动容器的宽度小于容器中的内容的宽度。

如果只需要纵向滚动,需要确保滚动容器的高度小于容器中的内容的宽度。