#### [scroll-view](https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html) 可滾動視圖區域。 | 屬性名 | 類型 | 默認值 | 說明 | | --------------------- | ----------- | ----- | ---------------------------------------- | | 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點擊頂部狀態欄、安卓雙擊標題欄時，滾動條返回頂部，只支持豎向 | | bindscrolltoupper | EventHandle | | 滾動到頂部/左邊，會觸發 scrolltoupper 事件 | | bindscrolltolower | EventHandle | | 滾動到底部/右邊，會觸發 scrolltolower 事件 | | bindscroll | EventHandle | | 滾動時觸發，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} | 使用豎向滾動時，需要給`<scroll-view/>`一個固定高度，通過 WXSS 設置 height。 ##### 注意事項 1. `tip`: 請勿在 `scroll-view` 中使用 `textarea`、`map`、`canvas`、`video` 組件 2. `tip`: `scroll-into-view` 的優先級高于 `scroll-top` 3. `tip`: 在滾動 `scroll-view` 時會阻止頁面回彈，所以在 `scroll-view` 中滾動，是無法觸發 `onPullDownRefresh` 4. `tip`: 若要使用下拉刷新，請使用頁面的滾動，而不是 `scroll-view` ，這樣也能通過點擊頂部狀態欄回到頁面頂部 **垂直滾動布局** ```html <scroll-view class="scrollWrapY" scroll-y> <view class="scrollView">1</view> <view class="scrollView">2</view> <view class="scrollView">3</view> </scroll-view> ``` ```css .scrollWrapY { height: 300rpx; background-color: #ccc; color: #fff; .scrollView { height: 200rpx; &:nth-child(1) { background-color: #f00; } &:nth-child(2) { background-color: #0f0; } &:nth-child(3) { background-color: #00f; } } } ``` **水平滾動布局** ```html <scroll-view class="scrollWrapX" scroll-x> <view class="scrollView">1</view> <view class="scrollView">2</view> <view class="scrollView">3</view> </scroll-view> ``` ```css .scrollWrapX { margin-top: 10rpx; width: 100%; height: 300rpx; background-color: #ccc; color: #fff; white-space: nowrap; .scrollView { display: inline-block; width: 100%; height: 300rpx; &:nth-child(1) { background-color: #f00; } &:nth-child(2) { background-color: #0f0; } &:nth-child(3) { background-color: #00f; } } } ``` **加載更多** ```html <scroll-view class="scrollWrapY" scroll-y bindscrolltolower="readMore" lower-threshold="0" scroll-top="50" > <view class="scrollView">1</view> <view class="scrollView">2</view> <view class="scrollView">3</view> </scroll-view> ``` ```js Page({ readMore (e) { console.log(e) console.log('加載更多') } }) ``` **滾動到某個子元素** ```html <scroll-view class="scrollWrapY" scroll-y scroll-into-view="view2" scroll-with-animation enable-back-to-top > <view class="scrollView" id="view1">1</view> <view class="scrollView" id="view2">2</view> <view class="scrollView" id="view3">3</view> </scroll-view> ``` :-: