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

小程序评论列表

效果图

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" 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;
}