> 可滾動視圖區域。用于區域滾動。 > 官方文檔：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> ~~~