comment-list 评论列表组件

解释：评论列表，评论的相关数据为托管数据。
Web 态说明：由于浏览器的限制，在 Web 态内暂不支持发布评论、收藏、分享等功能。

属性说明

属性名类型必填默认值说明
comment-paramObject是评论核心参数
toolbar-configObject否底部 toolbar 的相关配置
is-page-scrollBoolean否true滚动方式为页面滚动，若组件作为浮层使用，该参数需设为 false
need-toolbarBoolean否true是否需要底部 toolbar ，若使用开发者自定义的底部 toolbar ，该参数需设为 false
add-commentBoolean否false用于调起评论发布器发布评论
detail-pathString否点击单条评论跳转的详情页页面 path ，若没有配置则不会发生跳转；配置的前提是列表与详情均是页面级
is-foldedBoolean否false是否折叠列表，默认全展示
fold-numNumber否3折叠后列表展示最大条数，默认 3 条，最多 10 条
view-more-pathString否传入放置评论组件的页面路径，如‘/pages/list/index’，组件内部会触发跳转逻辑
view-more-styleObject否『全部 xx 条』的样式，目前只支持开发者自定义字体颜色
bindclickcommentEventHandler否绑定点击单条评论的事件，点击单条评论时触发，返回数据为{status, data:{srid}}
bindviewmoreEventHandle否绑定点击更多事件，若除了页面跳转还需要其他操作，可通过该回调执行；若为浮层，也可使用该回调自定义交互逻辑

comment-param 服务参数说明

属性名类型必填默认值说明示例值
snidString是文章的唯一标识，与 path 参数一一对应‘20200101’
titleString是文章标题
pathString是智能小程序内页链接，最长不能超过 194 字符。如该文章需要入信息流投放，需保证该参数与信息流投放提交的 path 一致，否则将会影响流量“path”:”/pages/index/index”
imagesArray否数组第一项用于收藏功能的展示图片[‘https://b.bdstatic.com/miniapp/images/demo-dog.png‘]

toolbar-config 参数说明

属性名类型必填默认值说明
placeholderString否输入框提示文字
moduleListArray否[‘comment’, ‘like’, ‘favor’, ‘share’]显示的互动模块，对应默认值分别是：评论数、点赞、收藏、分享
shareObject否若 moduleList 里配置了 share 模块，该参数为必填
share.titleString是分享标题
share.contentString否分享内容
share.imageUrlString否分享图标
share.pathString否页面 path ，必须是以 / 开头的完整路径，如果 path 中参数包含中文字符，需对中文字符进行编码

view-more-style 参数说明

属性名类型必填默认值说明
colorString否‘#3388ff’『全部 xx 条』的字体颜色，默认为视觉提供色号，开发者可传入自定义色号

代码示例 1：列表组件放入页面

页面中引用动态库组件的方式是：在页面的 json 配置的 usingSwanComponents 字段中声明组件引用。

  • JSON
  1. {
  2.     "navigationBarTitleText": "评论列表",
  3.     "usingSwanComponents": {
  4.         "comment-list": "dynamicLib://myDynamicLib/comment-list"
  5.     }
  6. }

在页面中放入列表组件，传入必要的参数。

  • SWAN
  • JS
  1. <!-- 评论列表组件 -->
  2. <comment-list
  3.     comment-param="{{commentParam}}"
  4.     detail-path="{{detailPath}}"
  5.     toolbar-config="{{toolbarConfig}}"
  6.     bindclickcomment="clickComment">
  7. </comment-list>
  1. Page({
  2.     data: {
  3.         commentParam: {},
  4.         detailPath: '/pages/detail/index?params1=abd',
  5.         // 底部互动 bar 的配置
  6.         toolbarConfig: {
  7.             // 若 moduleList 中配置有 share 模块，默认是有，则该属性为必填，title 必传
  8.             share: {
  9.                 title: '测试文章标题'
  10.             }
  11.         }
  12.     },
  14.     onLoad(query) {
  15.         this.setData({
  16.             commentParam: {
  17.                 snid: '10070000311753961',
  18.                 path: '/pages/comment/index?snid=test_snid57',
  19.                 title: '测试文章标题',
  20.                 content: '测试文章内容'
  21.             }
  22.         });
  23.     },
  25.     onReady() {
  26.         requireDynamicLib('myDynamicLib').listenEvent();
  27.     },
  29.     clickComment(e) {
  30.     }
  31. });

代码示例 2：列表支持折叠

  • SWAN
  • JS
  • JSON
  • CSS
  1. <view class="container">
  2.     <view class="article-header">
  3.         <text class="title" selectable="true">{{header.title}}</text>
  4.         <view class="source">
  5.             <image s-if="!!header.avatar" src="{{header.avatar}}"/>
  6.             <view class="info">
  7.                 <text class="author">{{header.author}}</text>
  8.                 <text class="time">{{header.time}}</text>
  9.             </view>
  10.         </view>
  11.     </view>
  13.     <view class="article-content">
  14.         <block s-for="{{content.items}}" s-for-index="eleIndex">
  15.             <block s-if="{{item.type === 'text'}}">
  16.                 <view class="content-p" data-index="{{eleIndex}}">
  17.                     <text selectable="true">{{item.data}}</text>
  18.                 </view>
  19.             </block>
  20.             <block s-elif="{{item.type === 'image'}}">
  21.                 <image
  22.                     class="content-img"
  23.                     src="{{item.data.src}}"
  24.                     original-src="{{item.data.src}}"
  25.                     mode="widthFix"
  26.                     preview="true"
  27.                     lazy-load="true"/>
  28.             </block>
  29.         </block>
  30.     </view>
  32.     <!-- 评论列表支持折叠 -->
  33.     <comment-list class="list"
  34.         comment-param="{{commentParam}}"
  35.         is-folded="{{true}}"
  36.         fold-num="{{foldNum}}"
  37.         toolbar-config="{{toolbarConfig}}"
  38.         bindclickcomment="clickComment"
  39.         bindviewmore="viewMore">
  40.     </comment-list>
  41.     <div class="comment-list-folded-bottom-margin"></div>
  43.     <view class="list-after">
  44.         <view>欢迎使用智能小程序动态库
  45.         欢迎使用智能小程序动态库
  46.         欢迎使用智能小程序动态库</view>
  47.         <image src="https://b.bdstatic.com/miniapp/images/demo-dog.png"
  48.             class="img"></image>
  49.         <view>欢迎使用智能小程序动态库
  50.         欢迎使用智能小程序动态库
  51.         欢迎使用智能小程序动态库</view>
  52.     </view>
  53. </view>
  1. Page({
  2.     data: {
  3.         commentParam: {},
  4.         header: {
  5.             title: '心疼！中国自行车女将卷入摔车事故 腹部扎入3厘米木刺坚持完赛',
  6.             avatar: 'https://b.bdstatic.com/miniapp/images/demo-dog.png',
  7.             author: '百度智能小程序',
  8.             time: '2020年04月14日'
  9.         },
  10.         content: {
  11.             items: [
  12.                 {
  13.                     type: 'image',
  14.                     data: {
  15.                         src: 'https://b.bdstatic.com/miniapp/images/demo-dog.png'
  16.                     }
  17.                 },
  18.                 {
  19.                     type: 'text',
  20.                     data: '测试文字'
  21.                 }
  22.             ]
  23.         },
  24.         // 折叠展示最大评论条数
  25.         foldNum: 5,
  26.         // 底部互动 bar 的配置
  27.         toolbarConfig: {
  28.             // 若 moduleList 中配置有 share 模块，默认是有，则该属性为必填，title 必传
  29.             share: {
  30.                 title: '心疼！中国自行车女将卷入摔车事故 腹部扎入3厘米木刺坚持完赛'
  31.             }
  32.         }
  33.     },
  35.     onLoad(query) {
  36.         this.setData({
  37.             commentParam: {
  38.                 snid: '10070000311753961',
  39.                 path: '/pages/comment/index?snid=test_snid57',
  40.                 title: '测试文章标题',
  41.                 content: '测试文章内容'
  42.             }
  43.         });
  44.     },
  46.     onReady() {
  47.         requireDynamicLib('myDynamicLib').listenEvent();
  48.     },
  50.     clickComment(e) {
  51.         swan.showToast({
  52.             title: 'click comment success'
  53.         });
  54.     },
  56.     viewMore() {
  57.         // swan.showToast({
  58.         //     title: 'click viewmore success'
  59.         // });
  60.     }
  61. });
  1. {
  2.     "navigationBarTitleText": "折叠列表页",
  3.     "usingSwanComponents": {
  4.         "comment-list": "dynamicLib://myDynamicLib/comment-list"
  5.     }
  6. }
  1. .article-header {
  2.     padding: 0 39.8rpx;
  3. }
  5. .article-header .title {
  6.     display: block;
  7.     font-size: 56rpx;
  8.     line-height: 1.5;
  9.     font-weight: 700;
  10. }
  12. .article-header .source {
  13.     margin-top: 56rpx;
  14.     display: flex;
  15.     align-items: flex-start;
  16. }
  18. .article-header .source image {
  19.     width: 82rpx;
  20.     height: 82rpx;
  21.     border-radius: 100%;
  22.     margin-right: 18.7rpx;
  23.     background-color: #eef1f4;
  24.     background-size: 37.4rpx 37.4rpx;
  25.     background-repeat: no-repeat;
  26.     background-position: center center;
  27.     background-image: url(../common/assets/logo-default.png);
  28. }
  30. .article-header .info {
  31.     display: flex;
  32.     flex-direction: column;
  33.     justify-content: center;
  34.     height: 82rpx;
  35. }
  37. .article-header .info .author {
  38.     font-size: 37.4rpx;
  39.     line-height: 1;
  40.     display: block;
  41.     color: #000;
  42.     margin-bottom: 16.4rpx;
  43. }
  45. .article-header .info .time {
  46.     display: block;
  47.     color: #999;
  48.     font-size: 28rpx;
  49.     line-height: 1;
  50. }
  52. .article-content {
  53.     color: #000;
  54.     font-size: 44.5rpx;
  55.     line-height: 1.58;
  56.     letter-spacing: 2.84;
  57.     margin-bottom: 70.2rpx;
  58. }
  60. .article-content .content-img {
  61.     width: 100%;
  62.     margin-top: 70.2rpx;
  63.     vertical-align: bottom;
  64.     background-color: #eef1f4;
  65.     background-size: 74.9rpx 74.9rpx;
  66.     background-repeat: no-repeat;
  67.     background-position: center center;
  68.     background-image: url(../common/assets/logo-default.png);
  69. }
  71. .article-content .content-p {
  72.     margin: 57.3rpx 39.8rpx -12.9rpx 39.8rpx;
  73.     text-align: justify;
  74.     word-break: break-all;
  75. }
  77. .list-after {
  78.     padding: 30rpx 18rpx 90rpx;
  79. }
  81. .comment-list-folded-bottom-margin {
  82.     height: 14.4rpx;
  83.     background-color: #f5f5f5;
  84. }

调起评论发布功能

若开发者希望调起评论发布器，且与组件内的评论发布逻辑保持一致（发布成功插入列表第一条，且滚动到列表顶部），可使用如下方法：
在 js 文件中，将 add-comment 属性设为 true ，即可调起评论发布器。

前提是评论列表组件已渲染。

代码示例：列表组件放入浮层且自定义底部 toolbar

  • SWAN
  • JS
  • JSON
  • CSS
  1. <view class="container">
  2.     <image src="https://b.bdstatic.com/miniapp/images/demo-dog.png"
  3.         class="img"></image>
  4.     <view class="bg">这是背景</view>
  5.     <view class="float-list-wrap" s-if="{{showList}}">
  6.         <view class="float-title">全部评论</view>
  7.         <view class="float-list">
  8.             <comment-list
  9.                 class="float-list-component"
  10.                 add-comment="{{addComment}}"
  11.                 is-page-scroll="{{false}}"
  12.                 comment-param="{{commentParam}}"
  13.                 need-toolbar="{{false}}"
  14.                 bindclickcomment="clickComment">
  15.             </comment-list>
  16.         </view>
  17.     </view>
  18.     <view class="float-detail-wrap" s-if="{{showDetail}}">
  19.         <view class="float-detail-close" bindtap="closeDetail">关闭</view>
  20.         <view class="float-title">评论详情</view>
  21.         <view class="float-detail">
  22.             <comment-detail
  23.                 class="float-detail-component"
  24.                 add-comment="{{publishComment}}"
  25.                 srid="{{srid}}"
  26.                 is-page-scroll="{{false}}"
  27.                 comment-param="{{commentParam}}"
  28.                 need-toolbar="{{false}}"
  29.                 back-list-after-delete="{{false}}"
  30.                 binddelete="detailDelete">
  31.             </comment-detail>
  32.         </view>
  33.     </view>
  34.     <button class="my-toolbar" bindtap="addComment">我是自定义底部 bar</button>
  35. </view>
  1. Page({
  2.     data: {
  3.         commentParam: {},
  4.         addComment: {},
  5.         showList: false,
  6.         showDetail: false,
  7.         srid: ''
  8.     },
  10.     onLoad() {
  11.         this.setData({
  12.             commentParam: {
  13.                 snid: '10070000311753961',
  14.                 path: '/pages/comment/index',
  15.                 title: '测试文章标题',
  16.                 'snid_type': ''
  17.             }
  18.         });
  19.     },
  21.     clickComment(e) {
  22.         this.setData({
  23.             srid: e.data.srid,
  24.             showDetail: true,
  25.             showList: false
  26.         });
  27.     },
  28.     addComment() {
  29.         const showDetail = this.data.showDetail;
  31.         if (!showDetail) {
  32.             this.setData({
  33.                 showList: true,
  34.                 addComment: true
  35.             }, () => {
  36.                 // 需要设为 false 的原因：因为调起发布监听 addComment 的变化，如果一直为 true，无法再次调起
  37.                 this.setData({
  38.                     'addComment': false
  39.                 });
  40.             });
  42.         }
  43.         else {
  44.             this.setData({
  45.                 showList: false,
  46.                 publishComment: true
  47.             }, () => {
  48.                 // 需要设为 false 的原因：因为调起发布监听 addComment 的变化，如果一直为 true，无法再次调起
  49.                 this.setData({
  50.                     'publishComment': false
  51.                 });
  52.             });
  53.         }
  55.     },
  57.     /**
  58.      * 详情删除后的回调
  59.      *
  60.      * @param {Object} options 返回的相关数据，{status, data}
  61.      * @property {string} srid 评论 id
  62.      */
  63.     detailDelete(options) {
  64.         if (options.data.srid) {
  65.             this.setData({
  66.                 showDetail: false,
  67.                 showList: true
  68.             });
  69.         }
  70.     },
  72.     closeDetail() {
  73.         this.setData({
  74.             showDetail: false,
  75.             showList: true
  76.         });
  77.     }
  78. });
  1. {
  2.     "navigationBarTitleText": "智能小程序示例",
  3.     "usingSwanComponents": {
  4.         "comment-list": "dynamicLib://myDynamicLib/comment-list",
  5.         "comment-detail": "dynamicLib://myDynamicLib/comment-detail"
  6.     }
  7. }
  1. page {
  2.     height: 100%;
  3. }
  5. .container {
  6.     display: flex;
  7.     flex-direction: column;
  8.     min-height: 100%;
  9. }
  11. .img {
  12.     width: 100%;
  13.     position: relative;
  14.     z-index: -1;
  15.     -webkit-overflow: visible;
  16. }
  18. .bg {
  19.     flex: 1;
  20. }
  22. .float-list-wrap,
  23. .float-detail-wrap {
  24.     background-color: #fff;
  25.     position: fixed;
  26.     bottom: 0;
  27.     left: 0;
  28.     display: block;
  29.     height: 900rpx;
  30.     animation: climbup .5s;
  31.     width: 100%;
  32.     z-index: 99;
  33.     border-top: 1px solid #666;
  34.     border-radius: 10rpx;
  35. }
  37. .float-title {
  38.     text-align: center;
  39.     padding: 20rpx 0;
  40. }
  42. .float-list-component,
  43. .float-detail-component {
  44.     height: 100%;
  45. }
  47. .float-list,
  48. .float-detail {
  49.     overflow-y: scroll;
  50.     height: 700rpx;
  51.     /* my-toolbar 有多高，这里就设多少 */
  52.     margin-bottom: 90rpx;
  53. }
  55. .float-detail-close {
  56.     float: right;
  57.     padding: 20rpx;
  58. }
  60. .my-toolbar {
  61.     position: fixed;
  62.     bottom: 0;
  63.     width: 100%;
  64.     height: 90rpx;
  65.     background-color: #fff;
  66.     z-index: 999;
  67.     font-size: 28.99rpx;
  68. }
  70. @keyframes climbup {
  71.     /* 因为浮层块高度为800rpx */
  72.     0% {
  73.         height: 0;
  74.     }
  75.     25% {
  76.         height: 200rpx;
  77.     }
  78.     50% {
  79.         height: 400rpx;
  80.     }
  81.     75% {
  82.         height: 600rpx;
  83.     }
  84.     100% {
  85.         height: 900rpx;
  86.     }
  87. }

Bug & Tip

  • Tip：评论列表数据开发者无法单独获取，也无需配置，评论列表会托管给组件，开发者接入组件之后，用户评论发布后会展现在评论列表上（自己可见），审核通过后会全体用户可见。
  • Tip：openid 和百度 App 登录状态（合称登录状态）会影响用户的发布评论、举报、删除、消息提醒、跳转个人主页和页面收藏（合称互动行为），未登录用户仅可以浏览评论和点赞。
  • Tip：收藏功能在基础库 3.190.1 以上可用。
  • Tip：由于 swan.login API 的非兼容改造，一站式互动组件统一改为在组件内强登录。