微信小程序（4）：可滚动视图区域组件

scroll-view 可滚动视图区域

使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性有很多，现列举以下，其余的学到后补充。

1、scroll-y：允许纵向滚动

相当于加了一个竖向的滑轮。各部分代码如下：
index.wxmi文件代码：

<scroll-view class="out" scroll-y>
  <view class="box">111</view>
  <view class="box">222</view>
  <view class="box">333</view>
  <view class="box">444</view>
  <view class="box">555</view>
  <view class="box">666</view>
  <view class="box">777</view>
</scroll-view>

index.wxss文件代码：

.out{
     
  width: 100%;
  background-color: gray;
  height: 400px;
}
 .out .box{
     
   width: 100px;
   height: 100px;
   background-color: pink;
 }

效果：

2、scroll-x：允许横向滚动

index.wxmi文件代码：

<scroll-view class="out" scroll-x>
  <view class="box">111</view>
  <view class="box">222</view>
  <view class="box">333</view>
  <view class="box">444</view>
  <view class="box">555</view>
  <view class="box">666</view>
  <view class="box">777</view>
</scroll-view>

index.wxss文件代码：

.out{
     
  width: 100%;
  background-color: gray;
  white-space: nowrap;/*设置不换行*/
}
 .out .box{
     
   width: 100px;
   height: 100px;
   background-color: pink;
   display: inline-block;/*显示成一行*/
   margin-right: 3px;
 }

效果：
水平方向可滑动

3、scroll-top：设置竖向滚动条位置

4、scroll-left：设置横向滚动条位置

例如我将 index.wxmi文件代码改成下面所示代码：

<scroll-view class="out" scroll-x scroll-left="300px">
  <view class="box">111</view>
  <view class="box">222</view>
  <view class="box">333</view>
  <view class="box">444</view>
  <view class="box">555</view>
  <view class="box">666</view>
  <view class="box">777</view>
</scroll-view>

效果：

5、scroll-with-animation：在设置滚动条位置时使用动画过渡（配合上面两个使用）

例如我将 index.wxmi文件代码改成下面所示代码：

<scroll-view class="out" scroll-x scroll-left="300px" scroll-with-animation>
  <view class="box">111</view>
  <view class="box">222</view>
  <view class="box">333</view>
  <view class="box">444</view>
  <view class="box">555</view>
  <view class="box">666</view>
  <view class="box">777</view>
</scroll-view>

效果图：
最终效果和上一节所示一样，但是刷新后多了个动画效果。