首先template
<!-- 商品内容 --> <view class="content"> <view class="list" v-for="(item, index) in itemList" :key="item.id" @click="intro(item)"> <image mode="widthFix" :src="item.img"></image> <view class="title">{{ item.title }}</view> <view class="con">{{ item.synopsis }}</view> <view class="con_one"> <view class="con_one_one">¥{{ item.price }}</view> <view class="con_one_two"> <s>¥{{ item.original_price }}</s> </view> </view> </view> </view>
在修改样式
.list { break-inside: avoid; width: 330rpx; border: 1px solid #f4f4f4; margin-top: 10px; border-radius: 20rpx; } .con { color: #8b8d8c; overflow: hidden; /*超出部分隐藏*/ white-space: nowrap; /*禁止换行*/ text-overflow: ellipsis; margin-left: 15rpx; margin-right: 15rpx; font-size: 26rpx; } .title { margin-left: 15rpx; margin-right: 15rpx; font-size: 26rpx; color: #8b8d8c; overflow: hidden; /*超出部分隐藏*/ white-space: nowrap; /*禁止换行*/ text-overflow: ellipsis; } /* 内容区 */ .content { padding: 30rpx; box-sizing: border-box; column-count: 2; } image { width: 100%; border-radius: 6rpx; }
js中
itemList: [ { imageSrc: 'https://pic.imgdb.cn/item/65084fd3204c2e34d3a96817.jpg', title: '我是标题1', content: '我是内容1', }, { imageSrc: 'https://pic.imgdb.cn/item/650850d7204c2e34d3a984ca.jpg', title: '我是标题2', content: '我是内容2', }, { imageSrc: 'https://pic.imgdb.cn/item/64eee7e1661c6c8e54a86a07.jpg', title: '我是标题3', content: '我是内容3', }, { imageSrc: 'https://pic.imgdb.cn/item/65085109204c2e34d3a9933c.jpg', title: '我是标题4', content: '我是内容4', }, { imageSrc: 'https://pic.imgdb.cn/item/65084fd3204c2e34d3a96817.jpg', title: '我是标题5', content: '我是内容5', }, ],