前端速查速记系列----评论列表

小程序评论列表

效果图

wxml代码

<view id="econtent"><block wx:for="{{commentlist}}" wx:for-item="item" wx:for-index="index" wx:key="{{item.id}}"><view class="box1"><view class="box1_6"><image src="图片地址" class="header_img" mode="" /></view><view class="box1_7"><view class="box1_1"><view class="box1_3"><view class="box1_3_1 fontw600">{{item.name}}</view><view class="box1_3_2 c91">{{tools.format(item.addtime,'YY-MM-DD')}}</view></view><view><block wx:for="{{5}}" wx:for-item="itn"><image wx:if="{{itn<item.star1}}" src="星星图片地址" class="star" mode="" /><image wx:else src="图片地址" class="star" mode="" /></block></view></view><view class="box1_4"><view>{{item.text}}</view><view class="box1_5"><block wx:for="{{item.chlist}}" wx:for-item="cit" wx:for-index="cin" wx:key="{{cit.id}}"><video wx:if="{{cit.type==2}}" src="图片地址" bindtap="checkmap" data-nid="{{cin}}" data-id="{{index}}" data-url="图片地址" /><image wx:else src="图片地址" bindtap="checkmap" data-nid="{{cin}}" data-id="{{index}}" data-url="图片地址" /></block></view></view></view></view></block></view>

wxss代码

.box1 {width: 100%;height: auto;margin-top: 30rpx;padding-bottom: 10rpx;position: relative;
}
.box1_6 {width: 20%;height: auto;float: left;position: relative;
}
.header_img {width: 100rpx;height: 100rpx;object-fit: cover;border-radius: 55%;margin-left: 8%;
}
.box1_7 {position: relative;width: 80%;height: auto;margin-left: 0;display: inline-block;
}
.box1_1 {position: relative;width: 100%;height: 100rpx;
}
.box1_3 {width: 100%;height: 50rpx;
}
.box1_3_1 {width: 50%;height: auto;float: left;
}
.fontw600 {font-weight: 700;
}
.box1_3_2 {width: 40%;height: 100%;float: right;text-align: right;
}
.c91 {color: #919191;
}
.star {width: 20rpx;height: 20rpx;
}
.box1_4 {position: relative;width: 100%;margin-right: 0;
}
.box1_5 {position: relative;margin-top: 10rpx;
}
.box1_5 image {width: 100rpx;height: 100rpx;margin-right: 8rpx;margin-top: 5rpx;
}
.box1_5 video {width: 100rpx;height: 100rpx;margin-right: 8rpx;margin-top: 5rpx;
}