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

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

首先来看看布局文件

    
        {{item.name}}
    

我这里布局很简单，就是一个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，所以你会发现你无法显示三列，而是两列，你可以试试效果，自己看看效果后更能理解了

至此就可以实现多列效果了