创新互联百度小程序教程：comment-list 评论列表组件

  • comment-list 评论列表组件
    • 属性说明
      • comment-param 服务参数说明
      • toolbar-config 参数说明
      • view-more-style 参数说明
      • 代码示例 1：列表组件放入页面
      • 代码示例 2：列表支持折叠
    • 调起评论发布功能
      • 代码示例：列表组件放入浮层且自定义底部 toolbar
    • Bug & Tip

    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.   
  
  
    2.  "navigationBarTitleText": "评论列表",
      3.   
  
  
    3.  "usingSwanComponents": {
      4.   
  
  
    4.  "comment-list": "dynamicLib://myDynamicLib/comment-list"
      5.   
  
  
    5.  }
      6.   
  
  
    6. }
      7.

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

    • SWAN
    • JS
     
 
 
        
  
  
      2.   
  
  
      3.   
  
  
    3.  comment-param="{{commentParam}}"
      4.   
  
  
    4.  detail-path="{{detailPath}}"
      5.   
  
  
    5.  toolbar-config="{{toolbarConfig}}"
      6.   
  
  
    6.  bindclickcomment="clickComment">
      7.   
  
  
      8.  
 

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

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

    • SWAN
    • JS
    • JSON
    • CSS
     
 
 
        
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  {{header.title}}
      4.   
  
  
    4.  
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.  {{header.author}}
      8.   
  
  
    8.  {{header.time}}
      9.   
  
  
    9.  
      10.   
  
  
    10.  
      11.   
  
  
    11.  
      12.   
  
  
      13.   
  
  
    13.  
      14.   
  
  
    14.  
      15.   
  
  
    15.  
      16.   
  
  
    16.  
      17.   
  
  
    17.  {{item.data}}
      18.   
  
  
    18.  
      19.   
  
  
    19.  
      20.   
  
  
    20.  
      21.   
  
  
    21.  
      22.   
  
  
    22.  class="content-img"
      23.   
  
  
    23.  src="{{item.data.src}}"
      24.   
  
  
    24.  original-src="{{item.data.src}}"
      25.   
  
  
    25.  mode="widthFix"
      26.   
  
  
    26.  preview="true"
      27.   
  
  
    27.  lazy-load="true"/>
      28.   
  
  
    28.  
      29.   
  
  
    29.  
      30.   
  
  
    30.  
      31.   
  
  
      32.   
  
  
    32.  
      33.   
  
  
    33.  
      34.   
  
  
    34.  comment-param="{{commentParam}}"
      35.   
  
  
    35.  is-folded="{{true}}"
      36.   
  
  
    36.  fold-num="{{foldNum}}"
      37.   
  
  
    37.  toolbar-config="{{toolbarConfig}}"
      38.   
  
  
    38.  bindclickcomment="clickComment"
      39.   
  
  
    39.  bindviewmore="viewMore">
      40.   
  
  
    40.  
      41.   
  
  
    41.  
      42.   
  
  
      43.   
  
  
    43.  
      44.   
  
  
    44.  欢迎使用智能小程序动态库
      45.   
  
  
    45.  欢迎使用智能小程序动态库
      46.   
  
  
    46.  欢迎使用智能小程序动态库
      47.   
  
  
    47.  
      48.   
  
  
    48.  class="img">
      49.   
  
  
    49.  欢迎使用智能小程序动态库
      50.   
  
  
    50.  欢迎使用智能小程序动态库
      51.   
  
  
    51.  欢迎使用智能小程序动态库
      52.   
  
  
    52.  
      53.   
  
  
      54.  
 

     
 
 
        
  
  
    1. Page({
      2.   
  
  
    2.  data: {
      3.   
  
  
    3.  commentParam: {},
      4.   
  
  
    4.  header: {
      5.   
  
  
    5.  title: '心疼！中国自行车女将卷入摔车事故 腹部扎入3厘米木刺坚持完赛',
      6.   
  
  
    6.  avatar: 'https://b.bdstatic.com/miniapp/images/demo-dog.png',
      7.   
  
  
    7.  author: '百度智能小程序',
      8.   
  
  
    8.  time: '2020年04月14日'
      9.   
  
  
    9.  },
      10.   
  
  
    10.  content: {
      11.   
  
  
    11.  items: [
      12.   
  
  
    12.  {
      13.   
  
  
    13.  type: 'image',
      14.   
  
  
    14.  data: {
      15.   
  
  
    15.  src: 'https://b.bdstatic.com/miniapp/images/demo-dog.png'
      16.   
  
  
    16.  }
      17.   
  
  
    17.  },
      18.   
  
  
    18.  {
      19.   
  
  
    19.  type: 'text',
      20.   
  
  
    20.  data: '测试文字'
      21.   
  
  
    21.  }
      22.   
  
  
    22.  ]
      23.   
  
  
    23.  },
      24.   
  
  
    24.  // 折叠展示最大评论条数
      25.   
  
  
    25.  foldNum: 5,
      26.   
  
  
    26.  // 底部互动 bar 的配置
      27.   
  
  
    27.  toolbarConfig: {
      28.   
  
  
    28.  // 若 moduleList 中配置有 share 模块，默认是有，则该属性为必填，title 必传
      29.   
  
  
    29.  share: {
      30.   
  
  
    30.  title: '心疼！中国自行车女将卷入摔车事故 腹部扎入3厘米木刺坚持完赛'
      31.   
  
  
    31.  }
      32.   
  
  
    32.  }
      33.   
  
  
    33.  },
      34.   
  
  
      35.   
  
  
    35.  onLoad(query) {
      36.   
  
  
    36.  this.setData({
      37.   
  
  
    37.  commentParam: {
      38.   
  
  
    38.  snid: '10070000311753961',
      39.   
  
  
    39.  path: '/pages/comment/index?snid=test_snid57',
      40.   
  
  
    40.  title: '测试文章标题',
      41.   
  
  
    41.  content: '测试文章内容'
      42.   
  
  
    42.  }
      43.   
  
  
    43.  });
      44.   
  
  
    44.  },
      45.   
  
  
      46.   
  
  
    46.  onReady() {
      47.   
  
  
    47.  requireDynamicLib('myDynamicLib').listenEvent();
      48.   
  
  
    48.  },
      49.   
  
  
      50.   
  
  
    50.  clickComment(e) {
      51.   
  
  
    51.  swan.showToast({
      52.   
  
  
    52.  title: 'click comment success'
      53.   
  
  
    53.  });
      54.   
  
  
    54.  },
      55.   
  
  
      56.   
  
  
    56.  viewMore() {
      57.   
  
  
    57.  // swan.showToast({
      58.   
  
  
    58.  // title: 'click viewmore success'
      59.   
  
  
    59.  // });
      60.   
  
  
    60.  }
      61.   
  
  
    61. });
      62.  
 

     
 
 
        
  
  
    1. {
      2.   
  
  
    2.  "navigationBarTitleText": "折叠列表页",
      3.   
  
  
    3.  "usingSwanComponents": {
      4.   
  
  
    4.  "comment-list": "dynamicLib://myDynamicLib/comment-list"
      5.   
  
  
    5.  }
      6.   
  
  
    6. }
      7.  
 

     
 
 
        
  
  
    1. .article-header {
      2.   
  
  
    2.  padding: 0 39.8rpx;
      3.   
  
  
    3. }
      4.   
  
  
      5.   
  
  
    5. .article-header .title {
      6.   
  
  
    6.  display: block;
      7.   
  
  
    7.  font-size: 56rpx;
      8.   
  
  
    8.  line-height: 1.5;
      9.   
  
  
    9.  font-weight: 700;
      10.   
  
  
    10. }
      11.   
  
  
      12.   
  
  
    12. .article-header .source {
      13.   
  
  
    13.  margin-top: 56rpx;
      14.   
  
  
    14.  display: flex;
      15.   
  
  
    15.  align-items: flex-start;
      16.   
  
  
    16. }
      17.   
  
  
      18.   
  
  
    18. .article-header .source image {
      19.   
  
  
    19.  width: 82rpx;
      20.   
  
  
    20.  height: 82rpx;
      21.   
  
  
    21.  border-radius: 100%;
      22.   
  
  
    22.  margin-right: 18.7rpx;
      23.   
  
  
    23.  background-color: #eef1f4;
      24.   
  
  
    24.  background-size: 37.4rpx 37.4rpx;
      25.   
  
  
    25.  background-repeat: no-repeat;
      26.   
  
  
    26.  background-position: center center;
      27.   
  
  
    27.  background-image: url(../common/assets/logo-default.png);
      28.   
  
  
    28. }
      29.   
  
  
      30.   
  
  
    30. .article-header .info {
      31.   
  
  
    31.  display: flex;
      32.   
  
  
    32.  flex-direction: column;
      33.   
  
  
    33.  justify-content: center;
      34.   
  
  
    34.  height: 82rpx;
      35.   
  
  
    35. }
      36.   
  
  
      37.   
  
  
    37. .article-header .info .author {
      38.   
  
  
    38.  font-size: 37.4rpx;
      39.   
  
  
    39.  line-height: 1;
      40.   
  
  
    40.  display: block;
      41.   
  
  
    41.  color: #000;
      42.   
  
  
    42.  margin-bottom: 16.4rpx;
      43.   
  
  
    43. }
      44.   
  
  
      45.   
  
  
    45. .article-header .info .time {
      46.   
  
  
    46.  display: block;
      47.   
  
  
    47.  color: #999;
      48.   
  
  
    48.  font-size: 28rpx;
      49.   
  
  
    49.  line-height: 1;
      50.   
  
  
    50. }
      51.   
  
  
      52.   
  
  
    52. .article-content {
      53.   
  
  
    53.  color: #000;
      54.   
  
  
    54.  font-size: 44.5rpx;
      55.   
  
  
    55.  line-height: 1.58;
      56.   
  
  
    56.  letter-spacing: 2.84;
      57.   
  
  
    57.  margin-bottom: 70.2rpx;
      58.   
  
  
    58. }
      59.   
  
  
      60.   
  
  
    60. .article-content .content-img {
      61.   
  
  
    61.  width: 100%;
      62.   
  
  
    62.  margin-top: 70.2rpx;
      63.   
  
  
    63.  vertical-align: bottom;
      64.   
  
  
    64.  background-color: #eef1f4;
      65.   
  
  
    65.  background-size: 74.9rpx 74.9rpx;
      66.   
  
  
    66.  background-repeat: no-repeat;
      67.   
  
  
    67.  background-position: center center;
      68.   
  
  
    68.  background-image: url(../common/assets/logo-default.png);
      69.   
  
  
    69. }
      70.   
  
  
      71.   
  
  
    71. .article-content .content-p {
      72.   
  
  
    72.  margin: 57.3rpx 39.8rpx -12.9rpx 39.8rpx;
      73.   
  
  
    73.  text-align: justify;
      74.   
  
  
    74.  word-break: break-all;
      75.   
  
  
    75. }
      76.   
  
  
      77.   
  
  
    77. .list-after {
      78.   
  
  
    78.  padding: 30rpx 18rpx 90rpx;
      79.   
  
  
    79. }
      80.   
  
  
      81.   
  
  
    81. .comment-list-folded-bottom-margin {
      82.   
  
  
    82.  height: 14.4rpx;
      83.   
  
  
    83.  background-color: #f5f5f5;
      84.   
  
  
    84. }
      85.

    调起评论发布功能

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

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

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

    • SWAN
    • JS
    • JSON
    • CSS
     
 
 
        
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  class="img">
      4.   
  
  
    4.  这是背景
      5.   
  
  
    5.  
      6.   
  
  
    6.  全部评论
      7.   
  
  
    7.  
      8.   
  
  
    8.  
      9.   
  
  
    9.  class="float-list-component"
      10.   
  
  
    10.  add-comment="{{addComment}}"
      11.   
  
  
    11.  is-page-scroll="{{false}}"
      12.   
  
  
    12.  comment-param="{{commentParam}}"
      13.   
  
  
    13.  need-toolbar="{{false}}"
      14.   
  
  
    14.  bindclickcomment="clickComment">
      15.   
  
  
    15.  
      16.   
  
  
    16.  
      17.   
  
  
    17.  
      18.   
  
  
    18.  
      19.   
  
  
    19.  关闭
      20.   
  
  
    20.  评论详情
      21.   
  
  
    21.  
      22.   
  
  
    22.  
      23.   
  
  
    23.  class="float-detail-component"
      24.   
  
  
    24.  add-comment="{{publishComment}}"
      25.   
  
  
    25.  srid="{{srid}}"
      26.   
  
  
    26.  is-page-scroll="{{false}}"
      27.   
  
  
    27.  comment-param="{{commentParam}}"
      28.   
  
  
    28.  need-toolbar="{{false}}"
      29.   
  
  
    29.  back-list-after-delete="{{false}}"
      30.   
  
  
    30.  binddelete="detailDelete">
      31.   
  
  
    31.  
      32.   
  
  
    32.  
      33.   
  
  
    33.  
      34.   
  
  
    34.  
      35.   
  
  
      36.  
 

     
 
 
        
  
  
    1. Page({
      2.   
  
  
    2.  data: {
      3.   
  
  
    3.  commentParam: {},
      4.   
  
  
    4.  addComment: {},
      5.   
  
  
    5.  showList: false,
      6.   
  
  
    6.  showDetail: false,
      7.   
  
  
    7.  srid: ''
      8.   
  
  
    8.  },
      9.   
  
  
      10.   
  
  
    10.  onLoad() {
      11.   
  
  
    11.  this.setData({
      12.   
  
  
    12.  commentParam: {
      13.   
  
  
    13.  snid: '10070000311753961',
      14.   
  
  
    14.  path: '/pages/comment/index',
      15.   
  
  
    15.  title: '测试文章标题',
      16.   
  
  
    16.  'snid_type': ''
      17.   
  
  
    17.  }
      18.   
  
  
    18.  });
      19.   
  
  
    19.  },
      20.   
  
  
      21.   
  
  
    21.  clickComment(e) {
      22.   
  
  
    22.  this.setData({
      23.   
  
  
    23.  srid: e.data.srid,
      24.   
  
  
    24.  showDetail: true,
      25.   
  
  
    25.  showList: false
      26.   
  
  
    26.  });
      27.   
  
  
    27.  },
      28.   
  
  
    28.  addComment() {
      29.   
  
  
    29.  const showDetail = this.data.showDetail;
      30.   
  
  
      31.   
  
  
    31.  if (!showDetail) {
      32.   
  
  
    32.  this.setData({
      33.   
  
  
    33.  showList: true,
      34.   
  
  
    34.  addComment: true
      35.   
  
  
    35.  }, () => {
      36.   
  
  
    36.  // 需要设为 false 的原因：因为调起发布监听 addComment 的变化，如果一直为 true，无法再次调起
      37.   
  
  
    37.  this.setData({
      38.   
  
  
    38.  'addComment': false
      39.   
  
  
    39.  });
      40.   
  
  
    40.  });
      41.   
  
  
      42.   
  
  
    42.  }
      43.   
  
  
    43.  else {
      44.   
  
  
    44.  this.setData({
      45.   
  
  
    45.  showList: false,
      46.   
  
  
    46.  publishComment: true
      47.   
  
  
    47.  }, () => {
      48.   
  
  
    48.  // 需要设为 false 的原因：因为调起发布监听 addComment 的变化，如果一直为 true，无法再次调起
      49.   
  
  
    49.  this.setData({
      50.   
  
  
    50.  'publishComment': false
      51.   
  
  
    51.  });
      52.   
  
  
    52.  });
      53.   
  
  
    53.  }
      54.   
  
  
      55.   
  
  
    55.  },
      56.   
  
  
      57.   
  
  
    57.  /**
      58.   
  
  
    58.  * 详情删除后的回调
      59.   
  
  
    59.  *
      60.   
  
  
    60.  * @param {Object} options 返回的相关数据，{status, data}
      61.   
  
  
    61.  * @property {string} srid 评论 id
      62.   
  
  
    62.  */
      63.   
  
  
    63.  detailDelete(options) {
      64.   
  
  
    64.  if (options.data.srid) {
      65.   
  
  
    65.  this.setData({
      66.   
  
  
    66.  showDetail: false,
      67.   
  
  
    67.  showList: true
      68.   
  
  
    68.  });
      69.   
  
  
    69.  }
      70.   
  
  
    70.  },
      71.   
  
  
      72.   
  
  
    72.  closeDetail() {
      73.   
  
  
    73.  this.setData({
      74.   
  
  
    74.  showDetail: false,
      75.   
  
  
    75.  showList: true
      76.   
  
  
    76.  });
      77.   
  
  
    77.  }
      78.   
  
  
    78. });
      79.  
 

     
 
 
        
  
  
    1. {
      2.   
  
  
    2.  "navigationBarTitleText": "智能小程序示例",
      3.   
  
  
    3.  "usingSwanComponents": {
      4.   
  
  
    4.  "comment-list": "dynamicLib://myDynamicLib/comment-list",
      5.   
  
  
    5.  "comment-detail": "dynamicLib://myDynamicLib/comment-detail"
      6.   
  
  
    6.  }
      7.   
  
  
    7. }
      8.  
 

     
 
 
        
  
  
    1. page {
      2.   
  
  
    2.  height: 100%;
      3.   
  
  
    3. }
      4.   
  
  
      5.   
  
  
    5. .container {
      6.   
  
  
    6.  display: flex;
      7.   
  
  
    7.  flex-direction: column;
      8.   
  
  
    8.  min-height: 100%;
      9.   
  
  
    9. }
      10.   
  
  
      11.   
  
  
    11. .img {
      12.   
  
  
    12.  width: 100%;
      13.   
  
  
    13.  position: relative;
      14.   
  
  
    14.  z-index: -1;
      15.   
  
  
    15.  -webkit-overflow: visible;
      16.   
  
  
    16. }
      17.   
  
  
      18.   
  
  
    18. .bg {
      19.   
  
  
    19.  flex: 1;
      20.   
  
  
    20. }
      21.   
  
  
      22.   
  
  
    22. .float-list-wrap,
      23.   
  
  
    23. .float-detail-wrap {
      24.   
  
  
    24.  background-color: #fff;
      25.   
  
  
    25.  position: fixed;
      26.   
  
  
    26.  bottom: 0;
      27.   
  
  
    27.  left: 0;
      28.   
  
  
    28.  display: block;
      29.   
  
  
    29.  height: 900rpx;
      30.   
  
  
    30.  animation: climbup .5s;
      31.   
  
  
    31.  width: 100%;
      32.   
  
  
    32.  z-index: 99;
      33.   
  
  
    33.  border-top: 1px solid #666;
      34.   
  
  
    34.  border-radius: 10rpx;
      35.   
  
  
    35. }
      36.   
  
  
      37.   
  
  
    37. .float-title {
      38.   
  
  
    38.  text-align: center;
      39.   
  
  
    39.  padding: 20rpx 0;
      40.   
  
  
    40. }
      41.   
  
  
      42.   
  
  
    42. .float-list-component,
      43.   
  
  
    43. .float-detail-component {
      44.   
  
  
    44.  height: 100%;
      45.   
  
  
    45. }
      46.   
  
  
      47.   
  
  
    47. .float-list,
      48.   
  
  
    48. .float-detail {
      49.   
  
  
    49.  overflow-y: scroll;
      50.   
  
  
    50.  height: 700rpx;
      51.   
  
  
    51.  /* my-toolbar 有多高，这里就设多少 */
      52.   
  
  
    52.  margin-bottom: 90rpx;
      53.   
  
  
    53. }
      54.   
  
  
      55.   
  
  
    55. .float-detail-close {
      56.   
  
  
    56.  float: right;
      57.   
  
  
    57.  padding: 20rpx;
      58.   
  
  
    58. }
      59.   
  
  
      60.   
  
  
    60. .my-toolbar {
      61.   
  
  
    61.  position: fixed;
      62.   
  
  
    62.  bottom: 0;
      63.   
  
  
    63.  width: 100%;
      64.   
  
  
    64.  height: 90rpx;
      65.   
  
  
    65.  background-color: #fff;
      66.   
  
  
    66.  z-index: 999;
      67.   
  
  
    67.  font-size: 28.99rpx;
      68.   
  
  
    68. }
      69.   
  
  
      70.   
  
  
    70. @keyframes climbup {
      71.   
  
  
    71.  /* 因为浮层块高度为800rpx */
      72.   
  
  
    72.  0% {
      73.   
  
  
    73.  height: 0;
      74.   
  
  
    74.  }
      75.   
  
  
    75.  25% {
      76.   
  
  
    76.  height: 200rpx;
      77.   
  
  
    77.  }
      78.   
  
  
    78.  50% {
      79.   
  
  
    79.  height: 400rpx;
      80.   
  
  
    80.  }
      81.   
  
  
    81.  75% {
      82.   
  
  
    82.  height: 600rpx;
      83.   
  
  
    83.  }
      84.   
  
  
    84.  100% {
      85.   
  
  
    85.  height: 900rpx;
      86.   
  
  
    86.  }
      87.   
  
  
    87. }
      88.

    Bug & Tip

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

    文章标题：创新互联百度小程序教程：comment-list 评论列表组件
    分享URL：http://www.csdahua.cn/qtweb/news9/469059.html

    网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

    成都快上网为您推荐相关内容

    网站建设知识

    分类信息网站

    香港虚拟主机　　 　重庆网站设计　　 　网络推广公司　　 　华川商务　　 　友益建筑机械凿　　 　成都响应式网站建设　　 　川西大数据中心　　 　达州网站建设　　 　高端网站建设　　 　四川网站建设　　 　宜宾网站设计　　 　犀浦雨棚定制　　 　定制网站　　 　工业净化空调　　 　品牌网站建设　　 　成都网站制作　　 　广安网站制作公司　　 　绵阳托管服务器　　 　网络营销推广　　 　德阳电信机房