小程序评论列表
效果图
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;
}