选中当前选中项

需求：在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  有些小程序教程视频 领取哟