需求是在某个区域显示3列数据,而且要等分。这个组件用的是多项选择器,内部由多个 checkbox 组成。
例子:
<view style="background-color: pink;width: 100%;">
<checkbox-group style="display: flex;flex-direction: row;flex-wrap: wrap;">
<label class="labelTest" v-for="(item,index) in [1,2,3,4,5]" :key="index">
<checkbox value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7)" />{{item}}
</label>
</checkbox-group>
</view>
.labelTest{
display: flex;
align-items: center;
flex-direction: row;
padding: 0;
height: 60rpx;
width: 25%;
}
flex-wrap: wrap;属性很重要,如果设置width:25%,不写这个属性,第5个label就会消失。
效果如图所示:
将 width: 25%; 改成 flex:1;
效果如下: