一、效果图
二、代码
<view class="content"> <view class="left"> <block wx:for="{{lists}}" wx:key="index"> <template is="item" data="{{...item}}" wx:if="{{index%2==0}}"></template> </block> </view> <view class="right"> <block wx:for="{{lists}}" wx:key="index"> <template is="item" data="{{...item}}" wx:if="{{index%2==1}}"></template> </block> </view> </view> <template name="item"> <view class="item" bindtap="goTo" data-url='../book/index?id={{id}}'> <image lazy-load="{{true}}" class="item-img" src="{{thumb}}" mode="widthFix"></image> <view class="item-title-box"> <navigator url="url" class="item-title" hover-class="none">{{title}}</navigator> </view> </view> </template>
.content{ margin: 20rpx 20rpx; text-align: justify; } .item{ background-color: #fff; /* margin: 1%; */ margin-bottom: 20rpx; display: inline-block; width: 100%; /* padding: 10rpx; */ box-sizing: border-box; box-shadow: 0 0 6rpx 6rpx rgba(0, 0, 0, .09); } .item-ava{ width: 40rpx; height: 40rpx; border-radius: 20rpx; } .heart{ width: 30rpx; height: 26rpx; margin-right: 8rpx; } .heart_{ display: flex; align-items: center; } .item-img{ width: 100% } .item-title{ font-size: 24rpx; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; font-family: 'PingFang SC-Medium'; color: #1e1e1e; margin: 15rpx; line-height: 27rpx; }