更新记录

1.0.0（2026-07-09） 下载此版本

• 初版发布
• 支持评论列表（最热/最新）、回复展开
• 支持底部弹框与输入栏
• 支持表情面板与连续输入
• 支持上拉触底加载更多（并提供点击兜底）

平台兼容性

uni-app(4.08)

nny-pl

通用评论列表展示组件，包含：

• 评论列表 douyin-comment-list
• 底部弹框 douyin-comment-modal（含输入框 + 表情面板）

兼容性

• App（app-plus）
• H5
• 各小程序平台（微信/支付宝/百度/抖音等）

说明：头像使用网络图片时，部分小程序需要在平台后台配置合法域名白名单。

安装

将本模块放到项目 uni_modules/nny-pl 后，按需在页面使用组件即可（支持 easycom）。

Demo

模块内自带示例页：

• uni_modules/nny-pl/pages/demo/demo.vue

你可以把它临时加到项目 pages.json 里预览（发布插件时保留 demo 不影响）。

快速使用

页面示例：

<template>
  <view>
    <view class="btn" @tap="show = true">打开评论</view>
    <douyin-comment-modal
      :show="show"
      :comments="comments"
      :loading="loading"
      :has-more="hasMore"
      @update:show="show = $event"
      @send="onSend"
      @load-more="onLoadMore"
      @like="onLike"
      @sort-change="onSortChange"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      loading: false,
      hasMore: true,
      comments: []
    }
  },
  methods: {
    onLike(comment) {
      // 建议在这里做真实的点赞请求或状态同步
      comment.isLiked = !comment.isLiked
      comment.likeCount += comment.isLiked ? 1 : -1
      if (comment.likeCount < 0) comment.likeCount = 0
    },
    onSortChange(type) {
      // type: 'hot' | 'time'
    },
    onSend({ content, replyTo }) {
      // content: 输入框文本（可包含多个 emoji）
      // replyTo: 被回复的评论对象（可能为 null）
    },
    onLoadMore() {
      // 点击加载更多，加载下一页数据
    }
  }
}
</script>

组件 API

douyin-comment-modal

Props：

• show：Boolean，是否显示弹框（支持 v-model:show / @update:show）
• comments：Array，评论数据
• loading：Boolean，列表加载态
• hasMore：Boolean，是否还有更多

Events：

• update:show(Boolean)：关闭或打开
• send({ content, replyTo })：发送（content 可包含多个 emoji）
• load-more()：点击加载更多
• like(comment)：点赞
• sort-change('hot'|'time')：切换排序
• close()：弹框关闭回调

douyin-comment-list

Props：

• comments：Array
• scrollHeight：String（例如 "420px" / "50vh"）
• loading：Boolean
• hasMore：Boolean

Events：

• like(comment)
• reply(comment)
• load-more()
• sort-change('hot'|'time')

评论数据结构（建议）

{
  id: 'c1',
  nickname: '昵称',
  avatarUrl: 'https://...',     // 可选，网络头像
  avatarColor: '#5B8DEF',       // 可选，无头像时用
  content: '评论内容',
  likeCount: 12,
  isLiked: false,
  isAuthor: false,
  isPinned: false,
  time: '刚刚',
  location: '上海',
  replies: [ ... ]              // 二级回复
}

常见问题

1）点击加载更多没有触发

请确认已监听 load-more 事件，并在回调中执行分页逻辑（例如追加下一页数据）。

2）网络头像无法显示

• H5：检查是否有跨域/混合内容限制（http/https）
• 小程序：把头像域名加入合法域名白名单

样式与二次开发

组件样式均为 scoped，你可以直接复制组件到业务侧修改，或在插件侧做二次发布。

推荐的定制项：

• douyin-comment-modal：标题文案、表情列表、按钮颜色
• douyin-comment-item：头像尺寸、昵称颜色、置顶标签样式