小程序:scroll-view

一. 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;}