scroll-view 滚动视图 · uniapp

> 可滚动视图区域。用于区域滚动。 > 官方文档：https://uniapp.dcloud.io/component/scroll-view [TOC] ## 属性说明 | 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 | | --- | --- | --- | --- | --- | | 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点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向 | 微信小程序 | | show-scrollbar | Boolean | false | 控制是否出现滚动条 | App-nvue 2.1.5+ | | refresher-enabled | Boolean | false | 开启自定义下拉刷新 | app-vue 2.5.12+,微信小程序基础库2.10.1+ | | refresher-threshold | number | 45 | 设置自定义下拉刷新阈值 | app-vue 2.5.12+,微信小程序基础库2.10.1+ | | refresher-default-style | string | "black" | 设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式 | app-vue 2.5.12+,微信小程序基础库2.10.1+ | | refresher-background | string | "#FFF" | 设置自定义下拉刷新区域背景颜色 | app-vue 2.5.12+,微信小程序基础库2.10.1+ | | refresher-triggered | boolean | false | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 | app-vue 2.5.12+,微信小程序基础库2.10.1+ | | enable-flex | boolean | false | 启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。 | 微信小程序 2.7.3 | | scroll-anchoring | boolean | false | 开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。 | 微信小程序 2.8.2 | | @scrolltoupper | EventHandle | | 滚动到顶部/左边，会触发 scrolltoupper 事件 | | | @scrolltolower | EventHandle | | 滚动到底部/右边，会触发 scrolltolower 事件 | | | @scroll | EventHandle | | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} | | | @refresherpulling | EventHandle | | 自定义下拉刷新控件被下拉 | app-vue 2.5.12+,微信小程序基础库2.10.1+ | | @refresherrefresh | EventHandle | | 自定义下拉刷新被触发 | app-vue 2.5.12+,微信小程序基础库2.10.1+ | | @refresherrestore | EventHandle | | 自定义下拉刷新被复位 | app-vue 2.5.12+,微信小程序基础库2.10.1+ | | @refresherabort | EventHandle | | 自定义下拉刷新被中止 | app-vue 2.5.12+,微信小程序基础库2.10.1+ | ## 普通scroll-view ~~~ <template> <view class="page"> <view class="uni-title uni-common-mt">纵向滚动</view> <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll"> <view id="demo1" class="scroll-view-item" style="background-color: red;">A</view> <view id="demo2" class="scroll-view-item" style="background-color: green;">B</view> <view id="demo3" class="scroll-view-item" style="background-color: blue;">C</view> </scroll-view> <button type="default" @tap="goTop">点击这里返回顶部</button> <view class="uni-title uni-common-mt">横向滚动</view> <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120"> <view id="demo1" class="scroll-view-item_H" style="background-color: red;">A</view> <view id="demo2" class="scroll-view-item_H" style="background-color: green;">B</view> <view id="demo3" class="scroll-view-item_H" style="background-color: blue;">C</view> </scroll-view> </view> </template> <script> export default { data() { return { scrollTop: 0, old: { scrollTop: 0 } } }, methods: { upper: function(e) { console.log(e) }, lower: function(e) { console.log(e) }, scroll: function(e) { console.log(e) this.old.scrollTop = e.detail.scrollTop }, goTop: function(e) { //视图会发生重新渲染 this.scrollTop = this.old.scrollTop //当视图渲染结束重新设置为0 this.$nextTick(function() { this.scrollTop = 0 }); uni.showToast({ icon: "none", title: "纵向滚动 scrollTop 值已被修改为 0" }) } } } </script> <style> .scroll-Y {height: 300rpx;} .scroll-view_H {white-space: nowrap;width: 100%;} .scroll-view-item {height: 300rpx;line-height: 300rpx;text-align: center;font-size: 36rpx;} .scroll-view-item_H {display: inline-block;width: 100%;height: 300rpx;line-height: 300rpx;text-align: center;font-size: 36rpx;} </style> ~~~