小程序里很多时候都需要用到滚动视图，例如下面的这个例子里

这就需要用到scroll-view组件

<scroll-view>

首先来做一个横向滚动的样例

1
2
3
4
5
6
7
8
9
<scroll-view>
  <view class="scrOut">
    <view class="scrBox">111</view>
    <view class="scrBox">222</view>
    <view class="scrBox">333</view>
    <view class="scrBox">444</view>
    <view class="scrBox">555</view>
  </view>
</scroll-view>
1
2
.scrOut{display: flex;flex-wrap: nowrap;}
.scrBox{width: 100px;height: 100px;background: gold;margin-right: 2px; flex: 0 0 100px;}

flex: 0 0 100px表示不放大（0），不缩小（0），原始大小（100px），详情可以参考这篇

但其实上，目前它还不能滚动，因为还没有给它添加属性

scroll-x

这个属性的意义是允许横向滚动，默认为false

将它添加到<scroll-view> 上，可以看见已经能成功滚动了

scroll-left

设置默认的起始位置

例如这里每个格子的大小是100px，而将起始位置设置成150px后，应当从第2个格子的一半开始，渲染出来也是这一结果

类似的，还有竖向滚动的样例

1
2
3
4
5
6
7
8
9
<scroll-view class="scroll2" scroll-y scroll-top="150px">
  <view class="scrOut2">
    <view class="scrBox2">111</view>
    <view class="scrBox2">222</view>
    <view class="scrBox2">333</view>
    <view class="scrBox2">444</view>
    <view class="scrBox2">555</view>
  </view>
</scroll-view>
1
2
.scroll2{height: 350px;}
.scrBox2{width: 100%;height: 100px;background: pink;margin-bottom: 1px;}

还有更多的属性会在学完JS后补充