小程序学习之路五：scroll-view实现多列布局

上面讲解了一些部分简单功能，接下来讲讲scroll-view的进阶，实现多列布局，先上效果：

首先来看看布局文件

<scroll-view class="scroll">
    <view class="item" wx:for='{
  {datas}}' wx:key='index' wx:for-item="item" data-item="{
  {item}}">
        <text class="item-text">{
  {item.name}}</text>
    </view>
</scroll-view>

我这里布局很简单，就是一个scroll-view，里面放一层view当做item，item里面包裹一个文本text

因为是学习前期，我还是说明下布局里面的意思，item的数据是datas，这个datas就是上图的item01-item10，这个实在js文件的data里面添加的，然后角标index，文本text显示的是datas里面的name字段

布局说好了，接下来说样式文件

.scroll{
  width: 100%;
  height: fit-content;
  background: chartreuse;
}
.item{
  width: calc(100