微信小程序 評論無限級列表，評論回復功能

微信小程序 實現評論無限級效果。

組件.wxml

<view class="pl_li" style=''>
    <view class="headimg">
        <image src="/images/{{model.panduan_admin==0 ? 'me' : 'zhuanjia'}}.png"></image>
    </view>
    <view class="nickname_liuyantext">
        <view class="nickname">{{model.panduan_admin==0 ? '我' : '回復'}}
        </view>

         <view class="text">{{model.content}}<view class="item_time"><text class="time">{{model.time}}</text><text class="huifu" bindtap="tapItem" data-id="{{model.id}}" >回復</text></view></view>
        <!-- <image src="/images/pinglun.png" class="pl_img" mode="widthFix" bindtap="tapItem" data-id='{{ model.id }}'></image> -->
    </view>
    <view class="fenge"></view>
    <view style='' wx:if='{{ isBranch}}' hidden='{{ !open }}'>
        <pltree wx:for='{{ model.children }}' wx:key='id' model='{{ item }}'></pltree>
    </view>
</view>

組件.js

// pages/components/mytree/mytree.js
Component({
  properties: {
    model: Object,
  },
  data: {
    open: true,     //是否展開
    isBranch: false, //是否有子級

  },
 
  methods: {
    toggle: function (e) {
      console.log('-1------------',e);
      if (this.data.isBranch) {
        this.setData({
          open: !this.data.open,
        })
      }
      this.triggerEvent('toggle',e);
    },
    tapItem: function (e) {
      var that = this;
      console.log('-2------------',e);
      var itemid = e.currentTarget.dataset.id;
      console.log('組件里點擊的id: ' + itemid);
      this.setData({
        isBranch:true
      })
      this.triggerEvent('tapitem', { id: itemid }, { bubbles: true, composed: true });
    }
  },
 
  ready: function (e) {
      //console.log('-3------------',e);

      console.log('**************',this.properties.model);
    this.setData({
      isBranch: Boolean(this.data.model.children && this.data.model.children.length),
    });
    
  },
})

組件.css

page {
    background-color: #fff;
  }
  
  .myvideo {
    width: 100%;
  
  }
  
  .content {
    background-color: #fff;
    padding: 20rpx;
  
  }
  
  .title {
    font-size: 32rpx;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    font-weight: bold;
  }
  
  .pinglun-content {
    border-top: 1px solid #f2f3f5;
    background-color: #fff;
    bottom: 0rpx;
    position: fixed;
    padding: 20rpx;
    width: -webkit-fill-available;
  
  }
  
  .pinglun-input {
    display: flex;
    font-size: 32rpx;
    bottom: 0px;
  }
  
  .weui-input {
    width: 80vh;
    height: 30px;
  
  }
  
  .page-body-button {
    width: 20vh;
    height: 30px;
    line-height: 30px;
    background-color: #6595f4;
    border-radius: 10rpx;
    color: #fff;
    font-size: 32rpx;
  }
  
  .pl_img {
    width: 25px;
    float: right;
    margin-bottom: 10rpx;
  }
  
  .liuyanview {
    width: 100%;
    margin: 32rpx auto;
  }
  
  .pl_ul {
  
    margin-bottom: 20rpx;
  
    overflow: hidden;
    border-bottom: 1px solid #f3f3f3;
  }
  
  .pl_li {
    overflow: hidden;

  }
  
  .headimg {
    width: 36px;
    height: 36px;
    border-radius: 10rpx;
  }
  
  .headimg image {
    width: 36px;
    height: 36px;
    border-radius: 10rpx;
  
  }
  
  .nickname_liuyantext {
    width: calc(100% - 46px);
    float: right;
    margin-top: -36px;
  }
  
  .nickname_liuyantext .nickname {
    font-size: 14px;
    color: #00349c;
  }
  .item_time{
    margin-bottom: 20rpx;
  }
  .huifu{
    color: #999;
    font-size: 12px;
    margin-left: 20rpx;
  }
  .nickname_liuyantext .text .time {
  
    color: #999;
  margin-top: 10rpx;
    font-size: 10px;
  }
  
  
  .nickname_liuyantext .text {
    font-size: 32rpx;
    color: #666;
  }
  
  .video_content {
    background-color: #fff;
  }
  
  .video_des {
    display: flex;
    background-color: #fff;
    margin-bottom: 20rpx;
    align-items: center;
    justify-content: center;
  }
  
  .video_title {
    font-size: 32rpx;
    font-weight: bold;
    margin: 20rpx;
    width: 70vh;
  }
  
  .video_pv {
    width: 30vh;
    margin: 20rpx;
    color: #666;
    font-size: 12px;
  }

  .fenge
  {
    clear: both;
  }

頁面.wxml

    <scroll-view class="pinglun_content">
      <view class="pl_all">
        <view wx:for="{{express}}" wx:key="id" class="liuyanview pl_ul">
          <view class="pl_li">
            <view class="headimg">
              <image src="/images/{{item.panduan_admin==0 ? 'me' : 'zhuanjia'}}.png"></image>
            </view>
            <view class="nickname_liuyantext">
              <view class="nickname">我
              </view>
              <view class="text">{{item.content}}<view class="item_time"><text class="time">{{item.time}}</text><text class="huifu" bindtap="btn_pinglun" data-id="{{item.id}}" >回復</text></view></view>
            </view>
          </view>
          <pltree wx:for="{{item.children}}" model="{{item}}" bind:tapitem='tapItem'></pltree>
        </view>
      </view>
    </scroll-view>

頁面.js
小程序內部接口以實現
省略不寫。

效果如下如

 點擊..進行回復 

 升級后效果演示