小程序评论组件实现（非云开发）

最新推荐文章于 2024-03-12 22:35:04 发布
原创 最新推荐文章于 2024-03-12 22:35:04 发布 · 890 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序

本文详细介绍了一款基于微信小程序的评论区组件的设计与实现，包括动态内容展示、排序筛选、评论折叠与展开等功能，以及组件化的开发思路。

不说别的先上效果图

 

主要实现方向就是呈组件嵌套的方式，下面是结构图：

正式代码：

主页部分

WXML：

<!--index.wxml-->
<view class='theme-container'>
  
  <!-- 专题信息 -->
  <view class='theme-info'>
    <view class='theme-detail'>
      <view class='theme-title'>{{theme.title}}</view>
      <view class='create-info'>
        <view class='original'>原创</view>
        <text class='create-name'>{{theme.createName}}</text>
        <text class='create-time'>{{theme.createTime}}</text>
      </view>
    </view>
  </view>

  <!-- 正文截止时间显示 -->
  <view class="theme-content">
    <rich-text space="emsp" nodes="{{content}}" bindtouchstart="bindtouchstart" bindtouchend="bindtouchend" />
    <view class='deadline'>截止时间：{{theme.expirationDate!=null?theme.expirationDate:'未设置'}}</view>
  </view>

  <!-- 评论 -->
  <view class='comment'>
    <view class='comment-tip'>精彩评论</view>
    <view class='comment-sort'>
      <radio-group bindchange="radioChange">
        <view class='label'>
          <label class="ui-radio {{item.checked==true?'active':''}} {{item.value}}" wx:for="{{items}}" wx:key="value">
            <radio value="{{item.value}}" checked="{{item.checked}}" />
            <image class="iconfont" src="{{item.value=='time-sorting'?'/static/img/time-sorting@2.png':'/static/img/thumbUp-sorting@2.png'}}"></image>
            <text class="text">{{item.name}}</text>
          </label>
        </view>
      </radio-group>
    </view>
    <view class='comment-list'>
      <comment-item wx:for="{{comment}}" wx:key="id" item="{{item}}" bind:deleteEvent="loadComment"></comment-item>
    </view>
  </view>

  <view class="blank"></view>
</view>

WXSS：

page {
  background-color: #ecedee
}

.theme-container {
  height: auto;
  margin-top: 20rpx;
  background-color: #fff
}

.theme-container .theme-info {
  height: 200rpx;
}

.theme-container .theme-info .theme-detail {
  margin: 0 40rpx;
  margin-top: 52rpx;
  height: auto;
  display: inline-block
}

.theme-container .theme-info .theme-detail .theme-title {
  width: 100%;
  height: auto;
  font-size: 42rpx;
  color: #353535
}

.theme-container .theme-info .theme-detail .create-info {
  font-size: 28rpx;
  margin-top: 16rpx;
  height: 30rpx;
  line-height: 30rpx
}

.theme-container>.theme-info>.theme-detail>.create-info>.original {
  display: inline-block;
  float: left;
  width: 50rpx;
  height: 30rpx;
  background-color: #e6212a;
  color: #fff;
  font-size: 20rpx;
  text-align: center;
  border-radius: 4rpx
}

.theme-container>.theme-info>.theme-detail>.create-info>.create-name {
  margin-left: 12rpx;
  font-size: 24rpx;
  color: #353535;
  line-height: 30rpx
}

.theme-container>.theme-info>.theme-detail>.create-info>.create-time {
  font-style: italic;
  margin-left: 12rpx;
  font-size: 24rpx;
  color: #c8c8c8;
  line-height: 30rpx
}

.theme-container>.theme-info>.theme-operation {
  margin: 40rpx 0rpx 20rpx;
  width: auto;
  height: 80rpx;
  text-align: center
}

.theme-container .theme-content {
  padding: 40rpx 0rpx;
  margin: 0px 18rpx;
  height: auto;
  background-color: #fff;
  border-top: 2px solid #e5e5e5;
  border-bottom: 2px solid #e5e5e5
}

.theme-container .theme-content>rich-text {
  word-break: break-all;
  font-size: 32rpx;
  color: #353535
}

.theme-container .theme-content .deadline {
  margin-top: 40rpx;
  width: 100%;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 28rpx;
  text-align: right;
  margin-bottom: 100rpx
}
/* ==================================== */
.comment {
  height: auto;
  margin: 0rpx 20rpx
}

.comment .comment-tip {
  width: 100%;
  height: 80rpx;
  font-size: 32rpx;
  line-height: 80rpx;
  color: #c8c8c8
}

.comment .comment-sort {
  width: 100%;
  height: 80rpx
}

.comment .comment-sort>radio-group {
  height: 100%
}

.ui-radio radio {
  display: none
}

.label {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap
}

.ui-radio {
  width: 50%;
  height: 100%;
  text-align: center;
  white-space: nowrap;
  font-size: 14px;
  background-color: #424242;
  color: #fff
}

.ui-radio image {
  width: 30rpx;
  height: 30rpx;
  vertical-align: middle
}

.ui-radio .text {
  color: #fff
}

.ui-radio.active {
  width: 50%;
  height: 100%;
  text-align: center;
  white-space: nowrap;
  background-color: #e6212a;
  color: #fff
}


.text {
  line-height: 80rpx;
  font-size: 14px;
  margin-left: 8rpx
}

.ui-radio.active .text {
  line-height: 80rpx;
  font-size: 14px
}

.comment .comment-list {
  margin-top: 20rpx;
  width: 100%;
  height: auto;
}

.theme-container .btn-write {
  width: 100%;
  height: 120rpx;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #fff
}

.theme-container .btn-write>view {
  margin: 0 auto;
  width: 90%;
  height: 80rpx;
  margin-top: 20rpx;
  line-height: 80rpx;
  border-radius: 10rpx;
  display: inline-block;
  text-align: center;
  background-color: #e13e3f;
  color: #fff;
  font-size: 30rpx
}

.theme-container .btn-write>view>image {
  width: 40rpx;
  height: 36rpx;
  vertical-align: middle;
  margin-right: 4rpx
}

.theme-container .btn-write>view>text {
  vertical-align: middle
}

.move-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 100%;
  position: fixed;
  top: 80%;
  right: 20rpx;
  z-index: 999;
  background-color: #f759ab;
  text-align: center;
  line-height: 80rpx
}

.move-btn>image {
  width: 32rpx;
  height: 32rpx
}

.blank {
  width: 100%;
  height: 140rpx;
}

JS：

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    showMove: false,
    items: [{
      name: '时间排序',
      value: 'time-sorting',
      checked: true,
    }, {
      name: '点赞排序',
      value: 'thumbUp-sorting'
    }],
    theme: {
      title: "这个猫有点肥",
      createName: "旧梦呀！",
      createTime: "04月27日 16:50",
    },
    content: [{
        name: "img",
        attrs: {
          style: "width:100%",
          src: "http://b.zol-img.com.cn/desk/bizhi/start/2/1363937806123.jpg",
        },
      },
      {
        name: "p",
        attrs: {
          style: "margin-bottom:5px",
        },
        children: [{
          name: "p",
          attrs: {
            class: "p2",
          },
          children: [{
            type: "text",
            text: "好猫",
          }]
        }]
      },
    ],

    comment: [{
        id: 1,
        content: "这个猫有点肥",
        createAvatar: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592810633643&di=b39cd992528f67473c64fd503cc9f824&imgtype=0&src=http%3A%2F%2Fbobatiyu.com%2Fwp-content%2Fuploads%2F2019%2F09%2F36cbbf05831851ba614c556baf37e25cfd7e3417.jpg",
        createName: "旧梦呀",
        reply: [{
          id: 2,
          content: "这个猫有点肥这个猫有点肥这个猫有点肥这个猫有点肥这个猫有点肥这个猫有点肥这个猫有点肥这个猫有点肥这个猫有点肥这个猫有点肥这个猫有点肥这个猫有点肥这个猫有点肥",
          createAvatar: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592810633643&di=b39cd992528f67473c64fd503cc9f824&imgtype=0&src=http%3A%2F%2Fbobatiyu.com%2Fwp-content%2Fuploads%2F2019%2F09%2F36cbbf05831851ba614c556baf37e25cfd7e3417.jpg",
          createName: "旧梦呀",
          replyName:"旧梦",
        }],
      }

    ]
  },

  onLoad: function () {

  },

  radioChange: function(e) {
    var items = this.data.items;
    for (var i = 0; i < items.length; ++i) {
      items[i].checked = items[i].value == e.detail.value
    }
    this.setData({
      items: items
    });
  },
});

JSON：

{
  "usingComponents": {
    "comment-item": "/components/comment-item/comment-item"
  }
}

comment-item部分

WXML：

<view class='comment-item'>
  <view class='head-portrait'>
    <image src='{{item.createAvatar}}'></image>
  </view>
  <view class='comment-detail'>
    <view class='comment-info-operation'>
      <view class='comment-info'>
        <view class='comment-create'>
          {{item.createNote!=null&&item.createNote!=''?item.createNote:item.createName}}
          <text wx:if="{{item.reconmend}}" class="comment-recommend">推荐</text>
        </view>
        <view class='comment-time'>{{item.createTime}}</view>
      </view>
      <view class='comment-operation'>
        <image wx:if="{{isGroupManager}}" src="{{collection?'/static/img/comment-collection-pressed@2.png':'/static/img/comment-collection@2.png'}}" bindtap='clickLike'></image>
        <image wx:if="{{isMine}}" src="/static/img/comment-edit-pressed@2.png" bindtap='clickEdit'></image>
        <image wx:if="{{hasUserInfo}}" class='last-image' src="{{praise?'/static/img/comment-praise-pressed@3.png':'/static/img/comment-praise@3.png'}}" bindtap='clickPraise'></image>
        <view class='praise-num'>{{item.collectCount}}</view>
      </view>
    </view>

    <view id="toggle-wrapper" class="comment-content {{toggleParams.toggleFlag == 1 ?'hidden-test':'show-test'}}" bindtouchstart="touchstart" bindtouchend="touchend" bindtouchmove="touchMove">
      <text id="toggle-content" space="nbsp" decode="{{true}}">{{item.content}}</text>
    </view>
    <view class='reply-delete'>
      <view class='reply' bindtap='bindReply'>
        <image src='/static/img/comment-reply@3.png'></image>
        <text>回复</text>
      </view>
      <view class='delete' wx:if="{{isMine||isGroupManager}}" bindtap='clickDelete'>
        <image src='/static/img/comment-delete@3.png'></image>
        <text>删除</text>
      </view>
    </view>
    <view class='show-more' wx:if="{{toggleParams.toggleShow}}">
      <view class='container' bindtap="toggleHandler">
        <image src='/static/img/pack-up@3.png' class="{{toggleParams.toggleFlag === 1?'show':'hide'}}"></image>
        <text>{{toggleParams.toggleFlag===1?'展开':'收起'}}</text>
      </view>
    </view>
    <comment-reply wx:for="{{item.reply}}" wx:key="{{item.id}}" item="{{item}}" bind:deleteParentEvent="reloadEvent" hasUserInfo="{{hasUserInfo}}"></comment-reply>
  </view>
  <i-modal title="删除确认" visible="{{ visible }}" actions="{{actions}}" bind:click="handleClick">
    <view>删除后无法恢复哦</view>
  </i-modal>
</view>

WXSS：

/* components/comment-item/comment-item.wxss */
.comment-item {
  width: 100%;
  height: auto;
  display: table;
  clear: both;
  padding: 10rpx 0rpx;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 25rpx;
  overflow: hidden
}

.comment-item .head-portrait {
  width: 80rpx;
  height: 80rpx;
  display: inline-block;
  float: left;
  text-align: center
}

.comment-item .head-portrait>image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 10rpx
}

.comment-item .comment-detail {
  width: 87%;
  height: auto;
  display: inline-block;
  float: left;
  margin-left: 10rpx
}

.comment-item .comment-detail .comment-info-operation {
  width: 100%;
  height: 80rpx
}

.comment-item .comment-detail .comment-info-operation .comment-info {
  display: inline-block;
  float: left;
  width: 60%;
  height: 100%
}

.comment-item .comment-detail .comment-info-operation .comment-operation {
  display: inline-block;
  float: right;
  width: auto;
  max-width: 268rpx;
  height: 100%;
  line-height: 80rpx
}

.comment-item .comment-detail .comment-info-operation .comment-info .comment-create {
  height: 50%;
  line-height: 40rpx;
  font-size: 30rpx;
  color: #353535;
  vertical-align: middle
}

.comment-item .comment-detail .comment-info-operation .comment-info .comment-create .comment-recommend {
  margin-left: 4px;
  font-size: 20rpx;
  color: white;
  background-color: #adadad;
  padding: 3rpx 10rpx;
  border-radius: 2px;
  vertical-align: middle
}

.comment-item .comment-detail .comment-info-operation .comment-info .comment-time {
  width: auto;
  height: 50%;
  font-size: 28rpx;
  color: #c8c8c8;
  font-style: italic
}

.comment-item .comment-detail .comment-info-operation .comment-operation>image {
  display: inline-block;
  width: 40rpx;
  height: 34rpx;
  color: #a2a2a2;
  vertical-align: middle;
  margin: 0rpx 10rpx
}

.comment-item .comment-detail .comment-info-operation .comment-operation>.last-image {
  margin-right: 0rpx !important
}

.comment-item .comment-detail .comment-info-operation .praise-num {
  display: inline-block;
  max-width: 80rpx;
  width: auto;
  height: 34rpx;
  line-height: 34rpx;
  font-size: 30rpx;
  vertical-align: middle;
  color: #c8c8c8
}

.comment-item .comment-detail .comment-content {
  width: 100%;
  font-size: 32rpx;
  color: #353535;
  overflow: hidden
}

.comment-item .comment-detail .comment-content.show-test {
  height: auto;
  overflow: auto;
  white-space: normal;
  text-overflow: clip;
  animation: hideIndex 0.3s;
  word-wrap: break-word;
  word-break: break-all
}

.comment-item .comment-detail .comment-content.hidden-test {
  width: 590rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
  white-space: nowrap
}

.comment-item .comment-detail .reply-delete {
  width: 100%;
  height: 50rpx;
  line-height: 48rpx;
  font-size: 28rpx;
  color: #a8a8a8
}

.comment-item .comment-detail .reply-delete .reply {
  width: auto;
  height: 100%;
  display: inline-block;
  vertical-align: middle
}

.comment-item .comment-detail .reply-delete .reply>image {
  width: 40rpx;
  height: 34rpx;
  vertical-align: middle
}

.comment-item .comment-detail .reply-delete .reply>text {
  line-height: 34rpx;
  vertical-align: middle;
  margin-left: 6rpx
}

.comment-item .comment-detail .reply-delete .delete {
  width: auto;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  margin-left: 46rpx
}

.comment-item .comment-detail .reply-delete .delete>image {
  width: 40rpx;
  height: 34rpx;
  vertical-align: middle
}

.comment-item .comment-detail .reply-delete .delete>text {
  line-height: 34rpx;
  vertical-align: middle;
  margin-left: 6rpx
}

.comment-item .comment-detail .show-more {
  width: 100%;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  margin: 12rpx 0 20rpx 0
}

.comment-item .comment-detail .show-more .container {
  display: inline-block;
  height: 60rpx;
  line-height: 60rpx
}

.comment-item .comment-detail .show-more .container>image {
  width: 40rpx;
  height: 30rpx;
  vertical-align: middle;
  transition: all 0.2s linear
}

.comment-item .comment-detail .show-more .container>text {
  font-size: 28rpx;
  color: #c8c8c8;
  vertical-align: middle;
  margin-left: 7rpx
}

.comment-item .comment-detail .show-more .container .show {
  transform: rotate(180deg)
}

JS：

// components/comment-item/comment-item.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    item: {
      type: Object,
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    toggleParams: {
      toggleFlag: 1, //0收起1展开
      toggleShow: false, //默认不显示toggleIcon
    },
  },
  ready: function () {
    this._checkRemarkToggle();
  },
  /**
   * 组件的方法列表
   */
  methods: {
    _getElementWidth(id = "") {
      let _query = this.createSelectorQuery();
      return new Promise(resolve => {
        _query.select(id).fields({
          size: true,
        }, (res) => {
          resolve(res.width)
          _query = null;
        }).exec();
      });
    },
    // 说明文字收起 / 隐藏事件
    toggleHandler() {
      const {
        toggleFlag
      } = this.data.toggleParams;

      this.setData({
        toggleParams: {
          toggleFlag: toggleFlag === 0 ? 1 : 0,
          toggleShow: true
        }
      })
    },
    /*
     * 检测说明文字是否需要隐藏/收起操作
     * 对比文字外层固定宽度容器元素宽度wrapperWidth与当前文字元素宽度contentWidth
     * 若相差小于10则说明超出一行
     * */
    _checkRemarkToggle() {
      Promise.all([
        this._getElementWidth('#toggle-wrapper'),
        this._getElementWidth('#toggle-content')
      ]).then(res => {
        const wrapperWidth = res[0];
        const contentWidth = res[1];
        if (wrapperWidth - contentWidth < 5) {
          this.setData({
            toggleParams: {
              toggleFlag: 0,
              toggleShow: true
            },
          })
        }
      })
    }
  },

  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },
})

JSON：

{
  "component": true,
  "usingComponents": {
    "comment-reply": "/components/comment-reply/comment-reply"
  }
}

comment-reply相关

WXML：
 

<!--components/comment-reply/comment-reply.wxml-->
<view class='comment-item'>
  <view class='comment-detail'>
    <view class='comment-info-operation'>
      <view class='comment-info'>
        <view class='comment-create'>{{item.createName}} 回复 {{item.replyName}}<text class="comment-recommend">推荐</text></view>
        <view class='comment-time'>{{item.createTime}}</view>
      </view>
      <view class='comment-operation'>
        <image src="{{collection?'/static/img/comment-collection-pressed@2.png':'/static/img/comment-collection@2.png'}}"></image>
        <image src="/static/img/comment-edit-pressed@2.png" ></image>
        <!-- <image src='/static/img/comment-delete@3.png'></image> -->
        <image class='last-image' src="{{praise?'/static/img/comment-praise-pressed@3.png':'/static/img/comment-praise@3.png'}}"></image>
        <view class='praise-num'>{{item.collectCount}}</view>
      </view>
    </view>

    <view id="toggle-wrapper" class="comment-content {{toggleParams.toggleFlag == 1 ?'hidden-test':'show-test'}}" bindtouchstart="touchstart" bindtouchend="touchend" bindtouchmove="touchMove">
      <text id="toggle-content" space="nbsp" decode="{{true}}">{{item.content}}</text>
    </view>
    <view class='reply-delete'>
      <view class='reply'>
        <image src='/static/img/comment-reply@3.png'></image>
        <text>回复</text>
      </view>
      <view class='delete'>
        <image src='/static/img/comment-delete@3.png'></image>
        <text>删除</text>
      </view>
    </view>
    <view class='show-more' wx:if="{{toggleParams.toggleShow}}">
      <view class='container' bindtap="toggleHandler">
        <image src='/static/img/pack-up@3.png' class="{{toggleParams.toggleFlag === 1?'show':'hide'}}"></image>
        <text>{{toggleParams.toggleFlag===1?'展开':'收起'}}</text>
      </view>
    </view>
    <comment-reply wx:for="{{item.reply}}" wx:key="id" item="{{item}}"></comment-reply>
  </view>
</view>

WXSS：

/* components/comment-reply/comment-reply.wxss */
.comment-item {
  width: 100%;
  height: auto;
  display: table;
  clear: both;
  padding: 10rpx 0rpx;
  margin-bottom: 10rpx;
  overflow: hidden
}

.comment-item .comment-detail {
  width: 100%;
  height: auto;
  display: inline-block;
  float: left
}

.comment-item .comment-detail .comment-info-operation {
  width: 100%;
  height: 80rpx
}

.comment-item .comment-detail .comment-info-operation .comment-info {
  display: inline-block;
  float: left;
  width: 56%;
  height: 100%
}

.comment-item .comment-detail .comment-info-operation .comment-operation {
  display: inline-block;
  float: right;
  width: auto;
  max-width: 200rpx;
  height: 100%;
  line-height: 80rpx
}

.comment-item .comment-detail .comment-info-operation .comment-info .comment-create {
  height: 50%;
  line-height: 40rpx;
  font-size: 30rpx;
  color: #353535;
  padding-left: 4rpx;
  border-left: 4px solid rgb(0, 204, 17);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.comment-item .comment-detail .comment-info-operation .comment-info .comment-create .comment-recommend {
  margin-left: 4px;
  font-size: 20rpx;
  color: white;
  background-color: #adadad;
  padding: 3rpx 10rpx;
  border-radius: 2px;
  vertical-align: middle
}

.comment-item .comment-detail .comment-info-operation .comment-info .comment-time {
  width: auto;
  height: 50%;
  font-size: 28rpx;
  color: #c8c8c8;
  font-style: italic
}

.comment-item .comment-detail .comment-info-operation .comment-operation>image {
  display: inline-block;
  width: 38rpx;
  height: 34rpx;
  color: #a2a2a2;
  vertical-align: middle;
  margin: 0rpx 10rpx
}

.comment-item .comment-detail .comment-info-operation .comment-operation>.last-image {
  margin-right: 0rpx !important
}

.comment-item .comment-detail .comment-info-operation .praise-num {
  display: inline-block;
  max-width: 80rpx;
  width: auto;
  height: 34rpx;
  line-height: 34rpx;
  vertical-align: middle;
  font-size: 30rpx;
  color: #c8c8c8
}

.comment-item .comment-detail .comment-content {
  width: 100%;
  font-size: 32rpx;
  color: #353535;
  overflow: hidden
}

.comment-item .comment-detail .comment-content.show-test {
  height: auto;
  overflow: auto;
  white-space: normal;
  text-overflow: clip;
  animation: hideIndex 0.3s;
  word-wrap: break-word;
  word-break: break-all
}

.comment-item .comment-detail .comment-content.hidden-test {
  width: 590rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
  white-space: nowrap
}

.comment-item .comment-detail .show-more {
  width: 100%;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  margin: 12rpx 0 20rpx 0
}

.comment-item .comment-detail .show-more .container {
  display: inline-block;
  height: 60rpx;
  line-height: 60rpx
}

.comment-item .comment-detail .show-more .container>image {
  width: 40rpx;
  height: 34rpx;
  vertical-align: middle;
  transition: all 0.2s linear
}

.comment-item .comment-detail .show-more .container>text {
  font-size: 28rpx;
  color: #c8c8c8;
  vertical-align: middle;
  margin-left: 7rpx
}

.comment-item .comment-detail .show-more .container .show {
  transform: rotate(180deg)
}


.comment-item .comment-detail .reply-delete {
  width: 100%;
  height: 50rpx;
  color: #a8a8a8;
  font-size: 28rpx;
  line-height: 48rpx;
}

.comment-item .comment-detail .reply-delete .reply {
  display: inline-block;
  width: auto;
  height: 100%;
  vertical-align: middle;
}

.comment-item .comment-detail .reply-delete .reply>image {
  width: 40rpx;
  height: 34rpx;
  vertical-align: middle;
}

.comment-item .comment-detail .reply-delete .reply>text {
  margin-left: 6rpx;
  vertical-align: middle;
  line-height: 34rpx;
}

.comment-item .comment-detail .reply-delete .delete {
  display: inline-block;
  margin-left: 46rpx;
  width: auto;
  height: 100%;
  vertical-align: middle;
}

.comment-item .comment-detail .reply-delete .delete>image {
  width: 40rpx;
  height: 34rpx;
  vertical-align: middle;
}

.comment-item .comment-detail .reply-delete .delete>text {
  margin-left: 6rpx;
  vertical-align: middle;
  line-height: 34rpx;
}

JS：

// components/comment-reply/comment-reply.js
Component({
  relations: {
    '../collapse/index': {
      type: 'parent',
      linked: function (target) {
        const options = {
          accordion: target.data.accordion
        }
        if (target.data.name === this.data.name) {
          options.showContent = 'i-collapse-item-show-content';
        }
        this.setData(options);
      }
    }
  },

  /**
   * 组件的属性列表
   */
  properties: {
    item: {
      type: Object,
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    toggleParams: {
      toggleFlag: 1, //0收起1展开
      toggleShow: false, //默认不显示toggleIcon
    },
  },

  ready: function () {
    this._checkRemarkToggle();
  },

  /**
   * 组件的方法列表
   */
  methods: {
    _getElementWidth(id = "") {
      let _query = this.createSelectorQuery();
      return new Promise(resolve => {
        _query.select(id).fields({
          size: true,
        }, (res) => {
          resolve(res.width)
          _query = null;
        }).exec();
      });
    },
    // 说明文字收起 / 隐藏事件
    toggleHandler() {
      const {
        toggleFlag
      } = this.data.toggleParams;

      this.setData({
        toggleParams: {
          toggleFlag: toggleFlag === 0 ? 1 : 0,
          toggleShow: true
        }
      })
    },
    /*
     * 检测说明文字是否需要隐藏/收起操作
     * 对比文字外层固定宽度容器元素宽度wrapperWidth与当前文字元素宽度contentWidth
     * 若相差小于10则说明超出一行
     * */
    _checkRemarkToggle() {
      Promise.all([
        this._getElementWidth('#toggle-wrapper'),
        this._getElementWidth('#toggle-content')
      ]).then(res => {
        const wrapperWidth = res[0];
        const contentWidth = res[1];
        if (wrapperWidth - contentWidth < 5) {
          this.setData({
            toggleParams: {
              toggleFlag: 0,
              toggleShow: true
            },
          })
        }
      })
    }
  },

  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
          console.log(this.properties.item)

    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },
})

JSON：

{
  "component": true,
  "usingComponents": {}
}

附上gitee地址：https://gitee.com/alon_george/wechat-comments.git

旧梦呀
关注
微信小程序开发：实现社交分享与评论功能
吃不胖.
08-04 2423
实现社交分享功能需要使用微信官方提供的wx.showShareMenu()API，该API可以在小程序页面右上角添加分享按钮。在小程序中实现社交分享与评论功能是非常重要的，因为这可以促进用户间的互动和交流，同时也能够增加应用程序的流量和知名度。以上的代码可以在小程序页面上添加一个分享按钮，并使用wx.showShareMenu()API在页面右上角添加分享按钮。以上的代码可以在小程序页面上添加一个评论框，当用户输入评论后，点击发送按钮即可将评论发送到服务器，并将服务器返回的所有评论显示在当前页面上。
微信小程序评论组件---WxComment
热门推荐
易名
05-18 1万+
Github项目地址 https://github.com/yicm/WxComment WxComment WxComment是一个微信小程序的评论插件，结合BaaS提供商LeanCloud，无需其他另外的个人或者云服务器，就可以免费使用。解决了需要个人去注册域名、备案、购买云服务器的繁杂问题。 特色 独立插件，独立放入小程序项目即可使用 友好的UI界面和交互界面 与微信用户信息...
微信小程序星级评价组件（含半星）
06-15
对微信小程序星级评价进行了组件化开发，可设置初始评分值及星星图标间距、引入后绑定组件提供的方法即可用获取当前评分值
微信小程序评论的实现
qq_41636732的博客
10-18 1万+
实现像这样的底部悬浮的留言框并实现留言功能。 话不多说直接上代码，评论存储用的是小程序的云开发数据库。 WXLL代码 //留言板实现 <view class='top'> <view bindtap='onTabsItemTap' data-index='{{index}}' class="top-item"> &l...
微信小程序实现类似微信评论区回复组件(mpx)
weixin_44706441的博客
04-25 1701
mpx开发微信小程序实现回复组件 效果 组件内容： <template> <view class="apply-component"> <van-popup bind:close="onClose" bind:click-overlay="onClose" position="bottom" show="{{ showPopup }}" > <view class="apply-co
小程序评价发布组件-写评论开启指南，附详细代码
2301_79071194的博客
07-19 2741
链接：https://pan.baidu.com/s/1OgrOJVMWSJn0G0J5ws3I_Q。在xxx.wxml页面代码中添加代码​​​​​​​。首先在app.json里面引入「评价发布组件」在xxx.js页面代码中添加代码​​​​​​​。
微信小程序云开发实现云数据库读写权限
10-16
微信小程序云开发中的云数据库是小程序云端存储数据的核心组件，它提供了一套完整的数据库服务，包括数据的增删改查等功能。在进行云开发时，经常会遇到数据权限的问题，即需要合理地控制对云数据库的读写权限，保证...
微信小程序组件 / API / 云开发示例
08-02
在本次提供的“微信小程序组件 / API / 云开发示例”资源中，开发者可以获得一系列完整的示例代码，这些代码详细展示了如何使用微信小程序提供的各种组件，如何调用其API，以及如何利用云开发的功能来构建小程序的...
微信小程序组件 _ API _ 云开发示例.zip
08-30
在微信小程序组件、API与云开发示例的集合中，开发者能够找到各种实现组件样式的代码示例、API调用的代码示例以及如何利用云开发快速实现小程序后端服务的示例。这不仅降低了小程序的开发难度，还大大提升了开发效率...
前端开发基于微信小程序的组件化架构设计：高内聚低耦合的自定义标签页实现与性能优化策略
最新发布
10-07
内容概要：本文深入探讨了微信小程序开发的进阶实践与架构设计，涵盖自定义组件开发、行为授权管理、云开发集成和多端适配等关键概念。通过一个完整的自定义标签页组件案例，详细解析了组件通信、状态管理、响应式...
微信小程序组件-API-云开发示例_小程序演示.zip
10-04
这些演示程序可能是以小程序的形式存在，通过具体的示例来展示如何使用微信小程序组件、如何通过API与微信服务进行交互，以及如何利用云开发来构建完整的应用逻辑。 这个压缩包文件可能包含多个小程序示例，分别...
微信小程序实现留言功能
10-17
主要为大家详细介绍了微信小程序实现留言功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
:glowing_star:微信小程序评分组件
01-27
wechat-miniprogram-rate 微信小程序评分组件:glowing_star: 下载 git clone https://github.com/simsir-lin/wechat-miniprogram-rate.git 使用 安装 npm install --save wechat-miniprogram-rate 在你的页面json中添加 { "usingComponents": { "rate": "wechat-miniprogram-rate" } } 在wxml中即可使用组件 <rate></rate> 调试开发 打开，'本地小程序项目 - 添加项目'，项目目录选择为 miniprogram_dev 目录 安装依赖 npm install 构建命令 npm run dev 更多帮助信息查看 注意 小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300
微信小程序常用组件
08-27
最近学习了一下小程序，写了一点demo，把写的demo，上传到这里，和大家交流学习，希望和大家共同进步
微信小程序的评论组件NewWxComment
易名
09-28 3199
本文属于原创，转载注明出处，欢迎关注微信小程序小白AI或者网站 https://xiaobaiai.net 1 NewWxComment NewWxCommenthttps://github.com/yicm/NewWxComment是一个微信小程序的评论组件，结合BaaS提供商LeanCloud，无需其他另外的个人或者云服务器，就可以免费使用。解决了需要个人去注册域名、备案、购买云服务器的...
[uniapp] uni-ui+vue3.2小程序评论列表组件 回复评论 点赞和删除
前端一线搬运工的博客
01-09 5644
主要是插件市场没找到满意的, 诸多用着也不顺, 所以有了cc-comment, 如有Bug请留言或Email, 开源不易且用且珍惜, 感谢使用. 关于功能样式, 主打一个借鉴如下; 参考[*小红书*]App的评论回复功能: 点击评论内容展示回复弹窗, 二级评论默认显示一条, 点击展开查看更多, 无评论收起功能. 参考[*什么值得买*]App的多层级回复评论title显示效果
微信小程序、uniapp手动引入微信官方的评价组件
Lulu_yo的博客
03-12 2568
体验评价类账号」可以在小程序中适当的场景和时机通过「评价发布组件」向用户征求评价，但请确保不影响用户对小程序功能的正常使用。在30天内，每个小程序仅可向每个用户征求1次评价。2.在uniapp中的manifest.json中添加以下代码，原生微信小程序的话在app.json中添加（在下面直接复制）
小程序评价组件多层
weixin_30596343的博客
11-14 133
1 <view class='wrap'> 2 <view wx:for="{{typeArr}}" wx:key="{{index}}" wx:for-index="idx" wx:for-item="child" class='liWrap'> 3 <view class='li1' wx:for="{{child.stars...
为你的小程序快速添加评论组件
薛定喵君的博客
01-18 3592
介绍如何为小程序快速接入评论系统 WxComment是一个微信小程序的评论插件，结合BaaS提供商LeanCloud，无需其他另外的个人或者云服务器，可以免费使用。 这里以科技爱好者周刊为例，介绍下如何使用WxComment插件为小程序添加评论功能。 # 账号准备 # LeanCloud 1.注册LeanCloud账号，创建LeanCloud应用； 2.前往 LeanCloud 控制台 > ...
微信小程序树洞功能实现与云开发技术探究
通过云开发，小程序可以轻松地使用微信的云能力，实现数据存储、实时消息推送、用户认证和服务器端逻辑处理等核心功能。 压缩包子文件的文件名称列表中包含： - .gitignore：这是一个在使用Git版本控制时会用到的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值