微信小程序开发-自定义评论列表组件

先上效果图

?

代码说明

• 引用

<view class="comment-view" wx:for="{{ comments.items }}">
      <mp-comment item="{{item}}" bind:clickComment="clickComment" ></mp-comment>
</view>

• 布局文件

<!--assets/components/comment/comment.wxml-->
<view class="comment" hover-class="comment_hover" bindtap="clickComment" data-id="{{item.id}}" data-uid="{{item.user_id}}"  data-name="{{item.user_name}}">
  <view style="width:15%">
    <image class="comment_head" mode='widthFix' src="{{item.uesr_head}}"/>
    <view class="comment_content_name">
      {{item.user_name}}
    </view>
  </view>
  <view class="comment_content">
    <!--文章标题-->
    <view class="comment-article_name" wx:if="{{showName}}">{{item.article_name}}</view>
    <!--父评论内容-->
    <view class="comment-parent_view" wx:if="{{item.parent}}">
      <view class="">
        <view class="comment-son_content_text comment_content_text">{{item.parent.user_name}}：{{item.parent.content}}</view>
      </view>
    </view>
    <!--本评论内容-->
    <view class="comment_content_span">{{item.created_at}}   来自{{item.source}}</view>
    <view class="comment_content_text">{{item.content}}</view>
    <!--子评论内容-->
    <view class="comment-son_view" wx:if="{{item.sons.length > 0}}">
      <view class="" wx:for-items="{{item.sons}}" wx:for-item="son">
        <view class="comment-son_content_text" hover-class="comment-son_content_text_hover" catchtap="clickComment" data-id="{{item.id}}" data-uid="{{son.user_id}}"  data-name="{{son.user_name}}">{{son.user_name}} 回复 {{son.reply_user}}：{{son.content}}</view>
      </view>
    </view>
  </view>
</view>

• 样式文件

/* assets/components/comment/comment.wxss */

.comment {
  display: flex;
  padding: 15px;
  padding-left: 15px;
}

.comment_hover {
  background-color:#eee 
}

.comment-article_name {
  font-size: 12px;
}

.comment_head {
  border-radius: 50px;
  width: 100%;
  height: 100rpx;
  margin-top: 10px;
}

.comment_content {
  width: 75%;
  background-color: #eee;
  position: relative;
  display: inline-block;
  padding: 10px;
  margin-left: 14px;
  min-height: 55px;
  z-index: 2;
}
.comment_content::before{
  position: absolute;
  left: -4px;
  content: '';
  width: 50px;
  height: 50px;
  border-style:solid;
  border-width:2px;
  border-color: #eee ;
  border-radius:6px;
  background-color: #eee;
  transform:rotate(45deg);
  z-index: -1;
}

.comment_content_name {
  font-size: 12px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comment_content_span {
  font-size: 10px;
  color: #a3a3a3;
}

.comment_content_text {
  font-size: 12px;
}

.comment-parent_view {
  border-bottom: 1rpx solid #ccc;
}

.comment-son_view {
  margin-top: 10px;
  border-top: 1rpx solid #ccc;
}

.comment-son-view_none {
  display: none;
}

.comment-son {
  display:  flex;
  padding: 15px;
  padding-top: 0px;
  padding-bottom: 0px;

}

.comment-son_content {
  width: 72%;
  margin-left: 8px;
}

.comment-son_content_text {
  font-size: 12px;
  color: #aaabbb;
}

.comment-son_content_text_hover {
  background-color: #aaa;
  color: #fff;
}

.comment-son_content_name {
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comment-son_content::before{
  width: 30px;
  height: 30px;
}

• js文件

// assets/components/comment/comment.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    item: {
      type: Object,
      value: {},
    },
    showName: {
      type: Boolean,
      value: false,
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
  },

  /**
   * 组件的方法列表
   */
  methods: {
    clickComment: function (e) {
      this.triggerEvent("clickComment", e.currentTarget.dataset)
    }
  }
})