需求：在data里取数据在页面渲染
效果应该是这样的点击谁出现谁的子集 而不是全部出来。
刚接触小程序的时候估计大部分都会遇见。当时我也是查阅很多资料才解决。
简单说下思路：首先要实现需求方法肯定是根据状态来更改子集的显示隐藏。
然后我们可以根据点击事件获取数组的唯一标识（id/数组下标）然后判断点击的是谁 改变其数组里 open变量的状态（我在数组里定义了一个变量（open 默认是false 隐藏状态））来实现其显示及隐藏。下面是我做的效果图。
wxml：(这个直接复制不了代码 ε=(´ο｀*)))唉 一点点手敲)
<view class='context' wx:for="{{userMessage}}" wx:key="{{item.id}}"><view class='radius' data-id='{{item.id}}' bindtap='clickTitleHide'><text>{{item.title}}><image mode="widthFix" style='width:30rpx;' src="{{item.open? '../../images/bottom.png':'../../images/right.png'}}"></view><view class="c-box {{item.open? 'c-box-show':''}}" ><block wx:for="{{item.child}}" wx:for-item="child" ><navigator url='../{{child.url}}'><view class='radius-child' bindtap='checkChild' data-id='{{item.id}}'><image mode='widthFix' style='width:30rpx;margin-right:15rpx;' src='../../images/right.png'><text>{{child.name}}></view></navigator></block></view></view>
wxss:
/*内容 */
.c-box{
height: 0;overflow: hidden;
opacity: 0;
transform: translateY(-50%);
transition: .3s; }
.c-box::before{
content: " ";
position: absolute;
left: 30rpx;
top: 0;
right: 30rpx;
height: 1px;
color: #D8D8D8;}
.c-box-show{
opacity: 1;
height: auto;
transform: translateY(0);}
.context{
margin:0 26rpx 20rpx 26rpx;
background: #fff;overflow: hidden;
border-radius:8rpx;
transition: opacity .3s;}
.radius{
justify-content: space-between;
align-items: center;
font-size: 30rpx;
color: rgb(51, 51, 51);
padding:20rpx 16rpx 20rpx 26rpx;
border-bottom: 2rpx solid rgb(236, 236, 236);}
.radius-child{
align-items: center;
font-size: 28rpx;
background: #fff;
padding:20rpx 16rpx 20rpx 26rpx;
color: rgb(51, 51, 51);
border-bottom: 2rpx solid rgb(248,248,248);}
/*客服 */
.contact{
height:80rpx;
opacity:0;
margin-top:-79rpx;
width: 100%; }
js:
data: {
userInfo:[],
userMessage:[{
id:'kaquan',
title:'卡券管理',
open: false,
child:[{
name:"我的优惠券",
url:"coupon/coupon"}
]
},{
id: 'sye',
title: '微预约',
open: false,
child: [{
name:"我的预约",
url:"userMake/make"}
]
},{
id: 'shopping',
title: '联系我们',
open: false,
child: [{
name:"客服热线",
url:false}]
}],
open:false
},
checkChild:function(e){
var val = e.currentTarget.dataset.id
if (val =="shopping"){
wx.makePhoneCall({
phoneNumber: app.globalData.tel //仅为示例，并非真实的电话号码
})
} else if (val =="yuyue"){
this.setData({
contact:true
})
}else{
return false;
}
},
官方组件dome https://github.com/k425996/wxAssembly 加我QQ：17472544 有些小程序教程视频 领取哟
