原網頁地址：https://uniapp.dcloud.io/component/scroll-view

說明

scroll-view，可滾動檢視區域。用於區域滾動。

需注意在webview渲染頁面中，區域滾動效能不及頁面滾動。

屬性說明

使用數值滾動時，需要給<scroll-view>一個固定高度，通過css設定heigth;使用橫向滾動時，需要給<scroll-view>新增white-space:nowrap；樣式。

示例 檢視演示

以下示例程式碼來自hello uni-app專案，推薦使用HBuilderX。

 1 <!-- 本示例未包含完整css，獲取外鏈css請參考上文，在hello uni-app專案中檢視 -->
 2 <template>
 3     <view>
 4         <view class="uni-padding-wrap uni-common-mt">
 5             <view class="uni-title uni-common-mt">
 6                 Vertical Scroll
 7                 <text>\n縱向滾動</text>
 8             </view>
 9             <view>
10                 <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
11                 @scroll="scroll">
12                     <view id="demo1" class="scroll-view-item uni-bg-red">A</view>
13                     <view id="demo2" class="scroll-view-item uni-bg-green">B</view>
14                     <view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
15                 </scroll-view>
16             </view>
17             <view @tap="goTop" class="uni-link uni-center uni-common-mt">
18                 點選這裡返回頂部
19             </view>
20             <view class="uni-title uni-common-mt">
21                 Horizontal Scroll
22                 <text>\n橫向滾動</text>
23             </view>
24             <view>
25                 <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
26                     <view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
27                     <view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
28                     <view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
29                 </scroll-view>
30             </view>
31         </view>
32     </view>
33 </template>

 1 export default {
 2     data() {
 3         return {
 4             scrollTop: 0,
 5             old: {
 6                 scrollTop: 0
 7             }
 8         }
 9     },
10     methods: {
11         upper: function(e) {
12             console.log(e)
13         },
14         lower: function(e) {
15             console.log(e)
16         },
17         scroll: function(e) {
18             console.log(e)
19             this.old.scrollTop = e.detail.scrollTop
20         },
21         goTop: function(e) {
22             this.scrollTop = this.old.scrollTop
23             this.$nextTick(function() {
24                 this.scrollTop = 0
25             });
26             uni.showToast({
27                 icon:"none",
28                 title:"縱向滾動 scrollTop 值已被修改為 0"
29             })
30         }
31     }

自定義下拉重新整理

注意自定義下拉重新整理的效能不及pages.json中配置的原生下拉重新整理。

1 <template>
2     <view>
3         <scroll-view style="height: 300px;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
4             :refresher-threshold="100" refresher-background="lightgreen" @refresherpulling="onPulling"
5             @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort"></scroll-view>
6     </view>
7 </template>

 1 <script>
 2     export default {
 3         data() {
 4             return {
 5                 triggered: false
 6             }
 7         },
 8         onLoad() {
 9             this._freshing = false;
10             setTimeout(() => {
11                 this.triggered = true;
12             }, 1000)
13         },
14         methods: {
15             onPulling(e) {
16                 console.log("onpulling", e);
17             },
18             onRefresh() {
19                 if (this._freshing) return;
20                 this._freshing = true;
21                 setTimeout(() => {
22                     this.triggered = false;
23                     this._freshing = false;
24                 }, 3000)
25             },
26             onRestore() {
27                 this.triggered = 'restore'; // 需要重置
28                 console.log("onRestore");
29             },
30             onAbort() {
31                 console.log("onAbort");
32             }
33         }
34     }
35 </script>

Tips

• APP-vue和小程式中，請勿在 scroll-view 中使用 map、video 等原生元件。小程式中 scroll-view 中也不要使用 canvas、textarea 原生元件。更新：微信基礎庫2.4.4起支援了原生元件在 scroll-view、swiper、movable-view 中的使用。app-nvue無此限制。
• scroll-view 不適合放長列表，有效能問題。長列表滾動和下拉重新整理，應該使用原生導航欄搭配頁面級的滾動和下拉重新整理實現。包括在app-nvue頁面，長列表應該使用list而不是scroll-view。
• scroll-into-view 的優先順序高於 scroll-top。
• scroll-view是區域滾動，不會觸發頁面滾動，無法觸發pages.json配置的下拉重新整理、頁面觸底onReachBottomDistance、titleNView的transparent透明漸變。
• 若要使用下拉重新整理，建議使用頁面的滾動，而不是 scroll-view 。外掛市場有前端模擬的基於scroll-view的下拉重新整理，但效能不佳。如必需使用前端下拉重新整理，推薦使用基於wxs的下拉重新整理，效能會比基於js監聽方式更高。
• 如果遇到scroll-top、scroll-left、refresher-triggered屬性設定不生效的問題參考：元件屬性設定不生效解決辦法
• scroll-view的滾動條設定，可通過css的-webkit-scrollbar自定義，包括隱藏滾動條。（app-nvue無此css）。