日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
創(chuàng)新互聯(lián)百度小程序教程：comment-list 評(píng)論列表組件
  • comment-list 評(píng)論列表組件
    • 屬性說(shuō)明
      • comment-param 服務(wù)參數(shù)說(shuō)明
      • toolbar-config 參數(shù)說(shuō)明
      • view-more-style 參數(shù)說(shuō)明
      • 代碼示例 1：列表組件放入頁(yè)面
      • 代碼示例 2：列表支持折疊
    • 調(diào)起評(píng)論發(fā)布功能
      • 代碼示例：列表組件放入浮層且自定義底部 toolbar
    • Bug & Tip

    comment-list 評(píng)論列表組件

    解釋：評(píng)論列表，評(píng)論的相關(guān)數(shù)據(jù)為托管數(shù)據(jù)。
    Web 態(tài)說(shuō)明：由于瀏覽器的限制，在 Web 態(tài)內(nèi)暫不支持發(fā)布評(píng)論、收藏、分享等功能。

    屬性說(shuō)明

    屬性名類型必填默認(rèn)值說(shuō)明
    comment-paramObject是評(píng)論核心參數(shù)
    toolbar-configObject否底部 toolbar 的相關(guān)配置
    is-page-scrollBoolean否true滾動(dòng)方式為頁(yè)面滾動(dòng)，若組件作為浮層使用，該參數(shù)需設(shè)為 false
    need-toolbarBoolean否true是否需要底部 toolbar ，若使用開(kāi)發(fā)者自定義的底部 toolbar ，該參數(shù)需設(shè)為 false
    add-commentBoolean否false用于調(diào)起評(píng)論發(fā)布器發(fā)布評(píng)論
    detail-pathString否點(diǎn)擊單條評(píng)論跳轉(zhuǎn)的詳情頁(yè)頁(yè)面 path ，若沒(méi)有配置則不會(huì)發(fā)生跳轉(zhuǎn)；配置的前提是列表與詳情均是頁(yè)面級(jí)
    is-foldedBoolean否false是否折疊列表，默認(rèn)全展示
    fold-numNumber否3折疊后列表展示最大條數(shù)，默認(rèn) 3 條，最多 10 條
    view-more-pathString否傳入放置評(píng)論組件的頁(yè)面路徑，如‘/pages/list/index’，組件內(nèi)部會(huì)觸發(fā)跳轉(zhuǎn)邏輯
    view-more-styleObject否『全部 xx 條』的樣式，目前只支持開(kāi)發(fā)者自定義字體顏色
    bindclickcommentEventHandler否綁定點(diǎn)擊單條評(píng)論的事件，點(diǎn)擊單條評(píng)論時(shí)觸發(fā)，返回?cái)?shù)據(jù)為{status, data:{srid}}
    bindviewmoreEventHandle否綁定點(diǎn)擊更多事件，若除了頁(yè)面跳轉(zhuǎn)還需要其他操作，可通過(guò)該回調(diào)執(zhí)行；若為浮層，也可使用該回調(diào)自定義交互邏輯

    comment-param 服務(wù)參數(shù)說(shuō)明

    屬性名類型必填默認(rèn)值說(shuō)明示例值
    snidString是文章的唯一標(biāo)識(shí)，與 path 參數(shù)一一對(duì)應(yīng)‘20200101’
    titleString是文章標(biāo)題
    pathString是智能小程序內(nèi)頁(yè)鏈接，最長(zhǎng)不能超過(guò) 194 字符。如該文章需要入信息流投放，需保證該參數(shù)與信息流投放提交的 path 一致，否則將會(huì)影響流量“path”:”/pages/index/index”
    imagesArray否數(shù)組第一項(xiàng)用于收藏功能的展示圖片[‘https://b.bdstatic.com/miniapp/images/demo-dog.png‘]

    toolbar-config 參數(shù)說(shuō)明

    屬性名類型必填默認(rèn)值說(shuō)明
    placeholderString否輸入框提示文字
    moduleListArray否[‘comment’, ‘like’, ‘favor’, ‘share’]顯示的互動(dòng)模塊，對(duì)應(yīng)默認(rèn)值分別是：評(píng)論數(shù)、點(diǎn)贊、收藏、分享
    shareObject否若 moduleList 里配置了 share 模塊，該參數(shù)為必填
    share.titleString是分享標(biāo)題
    share.contentString否分享內(nèi)容
    share.imageUrlString否分享圖標(biāo)
    share.pathString否頁(yè)面 path ，必須是以 / 開(kāi)頭的完整路徑，如果 path 中參數(shù)包含中文字符，需對(duì)中文字符進(jìn)行編碼

    view-more-style 參數(shù)說(shuō)明

    屬性名類型必填默認(rèn)值說(shuō)明
    colorString否‘#3388ff’『全部 xx 條』的字體顏色，默認(rèn)為視覺(jué)提供色號(hào)，開(kāi)發(fā)者可傳入自定義色號(hào)

    代碼示例 1：列表組件放入頁(yè)面

    頁(yè)面中引用動(dòng)態(tài)庫(kù)組件的方式是：在頁(yè)面的 json 配置的 usingSwanComponents 字段中聲明組件引用。

    • JSON
     
 
 
        
  
  
    1. {
      2.   
  
  
    2.  "navigationBarTitleText": "評(píng)論列表",
      3.   
  
  
    3.  "usingSwanComponents": {
      4.   
  
  
    4.  "comment-list": "dynamicLib://myDynamicLib/comment-list"
      5.   
  
  
    5.  }
      6.   
  
  
    6. }
      7.

    在頁(yè)面中放入列表組件，傳入必要的參數(shù)。

    • 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.  // 底部互動(dòng) bar 的配置
      6.   
  
  
    6.  toolbarConfig: {
      7.   
  
  
    7.  // 若 moduleList 中配置有 share 模塊，默認(rèn)是有，則該屬性為必填，title 必傳
      8.   
  
  
    8.  share: {
      9.   
  
  
    9.  title: '測(cè)試文章標(biāo)題'
      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: '測(cè)試文章標(biāo)題',
      20.   
  
  
    20.  content: '測(cè)試文章內(nèi)容'
      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.  歡迎使用智能小程序動(dòng)態(tài)庫(kù)
      45.   
  
  
    45.  歡迎使用智能小程序動(dòng)態(tài)庫(kù)
      46.   
  
  
    46.  歡迎使用智能小程序動(dòng)態(tài)庫(kù)
      47.   
  
  
    47.  
      48.   
  
  
    48.  class="img">
      49.   
  
  
    49.  歡迎使用智能小程序動(dòng)態(tài)庫(kù)
      50.   
  
  
    50.  歡迎使用智能小程序動(dòng)態(tài)庫(kù)
      51.   
  
  
    51.  歡迎使用智能小程序動(dòng)態(tài)庫(kù)
      52.   
  
  
    52.  
      53.   
  
  
      54.  
 

     
 
 
        
  
  
    1. Page({
      2.   
  
  
    2.  data: {
      3.   
  
  
    3.  commentParam: {},
      4.   
  
  
    4.  header: {
      5.   
  
  
    5.  title: '心疼！中國(guó)自行車女將卷入摔車事故 腹部扎入3厘米木刺堅(jiān)持完賽',
      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: '測(cè)試文字'
      21.   
  
  
    21.  }
      22.   
  
  
    22.  ]
      23.   
  
  
    23.  },
      24.   
  
  
    24.  // 折疊展示最大評(píng)論條數(shù)
      25.   
  
  
    25.  foldNum: 5,
      26.   
  
  
    26.  // 底部互動(dòng) bar 的配置
      27.   
  
  
    27.  toolbarConfig: {
      28.   
  
  
    28.  // 若 moduleList 中配置有 share 模塊，默認(rèn)是有，則該屬性為必填，title 必傳
      29.   
  
  
    29.  share: {
      30.   
  
  
    30.  title: '心疼！中國(guó)自行車女將卷入摔車事故 腹部扎入3厘米木刺堅(jiān)持完賽'
      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: '測(cè)試文章標(biāo)題',
      41.   
  
  
    41.  content: '測(cè)試文章內(nèi)容'
      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": "折疊列表頁(yè)",
      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.

    調(diào)起評(píng)論發(fā)布功能

    若開(kāi)發(fā)者希望調(diào)起評(píng)論發(fā)布器，且與組件內(nèi)的評(píng)論發(fā)布邏輯保持一致（發(fā)布成功插入列表第一條，且滾動(dòng)到列表頂部），可使用如下方法：
    在 js 文件中，將 add-comment 屬性設(shè)為 true ，即可調(diào)起評(píng)論發(fā)布器。

    前提是評(píng)論列表組件已渲染。

    代碼示例：列表組件放入浮層且自定義底部 toolbar

    • SWAN
    • JS
    • JSON
    • CSS
     
 
 
        
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  class="img">
      4.   
  
  
    4.  這是背景
      5.   
  
  
    5.  
      6.   
  
  
    6.  全部評(píng)論
      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.  關(guān)閉
      20.   
  
  
    20.  評(píng)論詳情
      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: '測(cè)試文章標(biāo)題',
      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.  // 需要設(shè)為 false 的原因：因?yàn)檎{(diào)起發(fā)布監(jiān)聽(tīng) addComment 的變化，如果一直為 true，無(wú)法再次調(diào)起
      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.  // 需要設(shè)為 false 的原因：因?yàn)檎{(diào)起發(fā)布監(jiān)聽(tīng) addComment 的變化，如果一直為 true，無(wú)法再次調(diào)起
      49.   
  
  
    49.  this.setData({
      50.   
  
  
    50.  'publishComment': false
      51.   
  
  
    51.  });
      52.   
  
  
    52.  });
      53.   
  
  
    53.  }
      54.   
  
  
      55.   
  
  
    55.  },
      56.   
  
  
      57.   
  
  
    57.  /**
      58.   
  
  
    58.  * 詳情刪除后的回調(diào)
      59.   
  
  
    59.  *
      60.   
  
  
    60.  * @param {Object} options 返回的相關(guān)數(shù)據(jù)，{status, data}
      61.   
  
  
    61.  * @property {string} srid 評(píng)論 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 有多高，這里就設(shè)多少 */
      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.  /* 因?yàn)楦訅K高度為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：評(píng)論列表數(shù)據(jù)開(kāi)發(fā)者無(wú)法單獨(dú)獲取，也無(wú)需配置，評(píng)論列表會(huì)托管給組件，開(kāi)發(fā)者接入組件之后，用戶評(píng)論發(fā)布后會(huì)展現(xiàn)在評(píng)論列表上（自己可見(jiàn)），審核通過(guò)后會(huì)全體用戶可見(jiàn)。
    • Tip：openid 和百度 App 登錄狀態(tài)（合稱登錄狀態(tài)）會(huì)影響用戶的發(fā)布評(píng)論、舉報(bào)、刪除、消息提醒、跳轉(zhuǎn)個(gè)人主頁(yè)和頁(yè)面收藏（合稱互動(dòng)行為），未登錄用戶僅可以瀏覽評(píng)論和點(diǎn)贊。
    • Tip：收藏功能在基礎(chǔ)庫(kù) 3.190.1 以上可用。
    • Tip：由于 swan.login API 的非兼容改造，一站式互動(dòng)組件統(tǒng)一改為在組件內(nèi)強(qiáng)登錄。

    網(wǎng)頁(yè)名稱：創(chuàng)新互聯(lián)百度小程序教程：comment-list 評(píng)論列表組件
    網(wǎng)頁(yè)網(wǎng)址：http://www.dlmjj.cn/article/cojgdci.html