#### [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> ``` :-: