前端速查速记系列----评论列表-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端速查速记系列----评论列表。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

小程序评论列表

效果图

前端速查速记系列----评论列表,前端,速记,前端文章来源地址https://www.toymoban.com/news/detail-671184.html

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

到了这里，关于前端速查速记系列----评论列表的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！