注:本项目的图片资源来源于后端接口,所以使用的是v-for。
关键词:uniapp 小程序 flex布局 v-for 4栏展示 自适应
<view style="display: flex; flex-direction: row;flex-wrap: wrap;margin: 0 5%;"> <view style="width: 25%;margin-bottom: 16upx;" v-for='(items,indexs) in item.tags' :key='indexs'> <view> <image :src="items.imageUrl" style="width: 40px;height: 40px;margin: 0 25%;" ></image> <view style="text-align: center;font-size: 10px;font-family: Arial;"> {{items.name}} </view> </view> </view>
</view>