一. scroll-view
可滚动视图区域。
二. 属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| scroll-x | Boolean | false | 是否允许横向滚动 |
| scroll-y | Boolean | false | 是否允许纵向滚动 |
| upper-threshold | Number | 50 | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 |
| lower-threshold | Number | 50 | 距底部/右边多远时（单位px），触发 scrolltolower 事件 |
| bindscrolltoupper | EventHandle | 滚动到顶部/左边，会触发 scrolltoupper 事件 | |
| bindscrolltolower | EventHandle | 滚动到底部/右边，会触发 scrolltolower 事件 | |
| scroll-top | Number | 设置竖向滚动条位置，比如：scroll-top设置为50.就是默认滑动到距离顶部50px的位置上。 | |
| scroll-left | Number | 设置横向滚动条位置 | |
| scroll-into-view | String | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 。给子元素设置id值，并将该值赋值给scroll-view的scroll-into-view属性，就会自动滚动到该子元素。 | |
| bindscroll | EventHandle | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}。可以自己监听event，看看里面的值变化。 |
三. 实现
1. 纵向滚动
- 需要打开是否允许纵向滚动。 scroll-y
- 需要设置scroll-view固定的高度 height : 200px;
- 需要设置scroll-view子元素的高度。
//wxml
<scroll-view class="scroll-v" scroll-y>
<view class="scroll-item bc-red">1</view>
<view class="scroll-item bc-green">2</view>
<view class="scroll-item bc-orange">3</view>
</scroll-view>
//wxss
.scroll-v { width: 100%; height: 200px;}
.scroll-item { height: 200px;}
.bc-red { background-color: red;}
.bc-green { background-color: green;}
.bc-orange { background-color: orange;}
2. 横向滚动
- 需要打开是否允许横向滚动。 scroll-x
- 需要设置scroll-view的宽度 width：100%；
- 需要设置scroll-view的
white-space: nowrap;nowrap是强制不换行的意思。如果换行了，就起不到效果了。 - 需要设置子元素
display: inline-block;行内块元素
//wxml
<scroll-view class="scroll-h" scroll-x>
<view class="scroll-item-h bc-red">1</view>
<view class="scroll-item-h bc-green">2</view>
<view class="scroll-item-h bc-orange">3</view>
</scroll-view>
//wxss
.scroll-h {white-space: nowrap; width: 100%;}
.scroll-item-h {display: inline-block; width: 100%; height: 200px;}
.bc-red {background-color: red;}
.bc-green {background-color: green;}
.bc-orange {background-color: orange;}
