上面讲解了一些部分简单功能，接下来讲讲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% / 3); height: 100rpx; background: darkgray; position: relative; float: left; padding: 20rpx 10rpx; box-sizing: border-box; } .image{ width: 50rpx; height: 50rpx; } .text{ width: initial; height: max-content; color: brown; }大家可以看到我的scroll和image，text样式都是中规中矩的宽高背景色，没其他样式，那么主要操作就在item里面了：
首先说说item的position: relative;这个是代表item位置的绝对位置，我去掉这个也能达到展示图片效果，这里也是我的一个疑问，这个position什么场景下使用呢，求指教；
第二个float: left;这个是代表列表左边开始显示，你也可以试试right，看看效果就知道了；
第三个padding这个可以不管，就是设置内边距的；
第四个box-sizing: border-box;，这个玩意得好好唠叨了，这也是我为什么要加上第三个padding的原因，加上这个属性，则代表你的width包含了padding和边框，不加的话代表宽度不包含padding和边框，而我这里设置了padding，item的宽度又是1/3，如果不加这个属性，那么总宽度肯定就会超过1，所以你会发现你无法显示三列，而是两列，你可以试试效果，自己看看效果后更能理解了
至此就可以实现多列效果了
