#Uniapp:内置组件scroll-view

发布时间:2024年01月10日

内置组件

scroll-view

属性名类型默认值说明平台差异说明
scroll-xBooleanfalse允许横向滚动
scroll-yBooleanfalse允许纵向滚动
upper-thresholdNumber/String50距顶部/左边多远时(单位px),触发 scrolltoupper 事件
lower-thresholdNumber/String50距底部/右边多远时(单位px),触发 scrolltolower 事件
scroll-topNumber/String设置竖向滚动条位置
scroll-leftNumber/String设置横向滚动条位置
scroll-into-viewString值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
scroll-with-animationBooleanfalse在设置滚动条位置时使用动画过渡
enable-back-to-topBooleanfalseiOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向app-nvue,微信小程序
show-scrollbarBooleanfalse控制是否出现滚动条App-nvue 2.1.5+
refresher-enabledBooleanfalse开启自定义下拉刷新H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-thresholdNumber45设置自定义下拉刷新阈值H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-default-styleString“black”设置自定义下拉刷新默认样式,支持设置 black,white,none,none 表示不使用默认样式H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-backgroundString“#FFF”设置自定义下拉刷新区域背景颜色H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-triggeredBooleanfalse设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
enable-flexBooleanfalse启用 flexbox 布局。开启后,当前节点声明了 display: flex 就会成为 flex container,并作用于其孩子节点。微信小程序 2.7.3
scroll-anchoringBooleanfalse开启 scroll anchoring 特性,即控制滚动位置不随内容变化而抖动,仅在 iOS 下生效,安卓下可参考 CSS overflow-anchor 属性。微信小程序 2.8.2
@scrolltoupperEventHandle滚动到顶部/左边,会触发 scrolltoupper 事件
@scrolltolowerEventHandle滚动到底部/右边,会触发 scrolltolower 事件
@scrollEventHandle滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
@refresherpullingEventHandle自定义下拉刷新控件被下拉H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherrefreshEventHandle自定义下拉刷新被触发H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherrestoreEventHandle自定义下拉刷新被复位H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherabortEventHandle自定义下拉刷新被中止H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

注意

使用竖向滚动时,需要给 <scroll-view> 一个固定高度,通过 css 设置 height;使用横向滚动时,需要给<scroll-view>添加white-space: nowrap;样式。

文章来源:https://blog.csdn.net/weixin_47075554/article/details/135501827
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。