<scroll-view scroll-x="true" class="bookshelf-content">
<block v-for="(item, index) in cates" :key="index">
<view
@click="chenked(item.id)"
:class="{ active: isActive == item.id }"
class="item"
>
<text class="item-title text-over-1">{{ item.name }}</text>
</view>
</block>
</scroll-view>
.bookshelf-content {
white-space: nowrap; // 滚动必须加的属性
width: 100%;
height: 280upx;
padding: 20upx;
margin: 0 auto;
.item {
width: 24%;
margin-right: 20upx;
display: inline-block;
vertical-align: top;
.img {
display: inline-block;
image {
width: 170upx;
height: 220upx;
border-radius: 6upx;
}
}
.item-title {
display: block; // 让字体换行
width: 90%;
font-size: 30upx;
line-height: 40upx;
}
}
}