⼩程序评论⽆限级列表，评论回复功能
⼩程序实现评论⽆限级效果。
组件.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">{{t}}<view class="item_time"><text class="time">{{model.time}}</text><t
ext 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: {
iapp免费源码分享网站
toggle: function (e) {
console.log('-1------------',e);
if (this.data.isBranch) {
this.setData({
open: !this.data.open,
})
}
},
tapItem: function (e) {
var that = this;
console.log('-2------------',e);
var itemid = e.currentTarget.dataset.id;
console.log('组件⾥点击的id: ' + itemid);
this.setData({
isBranch:true
})
}
},
ready: function (e) {
//console.log('-3------------',e);
console.log('**************',del);
this.setData({
isBranch: Boolean(del.children && del.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;
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 {
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">{{t}}<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
⼩程序内部接⼝以实现
省略不写。
效果如下如
点击..进⾏回复
升级后效果演⽰

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。