由于小程序js限制没有列表，也无法通过id增删节点信息，故而只能通过一些其它的方法来实现。

需求：做一个详细信息展开的功能，即点击列表某一项时展开该项对应的详细信息

先上效果图：

实现思路：

怎么确保你点开的就是那一项，而不是其它的兄弟节点，被每一项的唯一性困扰了一下，思路在H5上一时间没转过来。

给每一项绑定唯一的值，点击此项时，获取的值为a，则展开值为a的这一项，关闭所有非a值的其它项。

源码实现：

Wxml

<view class='record'>

<text>打卡记录</text>

<view wx:for='{{list}}' wx:key='this' wx:for-item='item' wx:for-index='index'>

<view class='hr'></view>

<view class='detailTitle' catchtap='getDateRecord' data-index='{{index}}' data-date='{{item.date}}'>

<view class='date'>

{{item.date}}

</view>

<image wx:if="{{!item.show}}" class='img' src='../../img/rcircle.png' mode='widthFix'></image>

<image wx:else class='img' src='../../img/dcircle.png' mode='widthFix'></image>

</view>

<view wx:if="{{item.show}}" class='detailContent' wx:for='{{item.recordList}}' wx:for-item='recordItem'>

<view>{{recordItem.time}}</view>

<view>{{recordItem.type}}</view>

</view>

</view>

Wxss

样式简单就不贴啦~恕我直言，在座的各位都是大佬，肯定比我厉害。

重头戏来了，下面是js实现！！！

Js

getDateRecord:function(e){

var that = this;

var index = e.currentTarget.dataset.index;

var date = e.currentTarget.dataset.date;

var list = that.data.list;

list[index].recordList = that.getDetailData(date, getApp().globalData.userInfo.openid);

//console.log(list[index].recordList) 

//list中其它的数据都是从服务器中取得，记得返回数据的list中加一个show字段，默认为false，即默认所有子项不展开

list[index].show = !list[index].show;

this.packUp(list, index);

that.setData({list});

},

//让所有的展开项，都变为收起

packUp(data, index) {

for (var i = 0, len = data.length; i < len; i++) {

if(index!=i){

data[i].show = false;

}

}

},

//具体的业务实现，从服务器中取得的数据

getDetailData:function(date,openid){

var that = this;

var result=[];

wx.request({

url: getApp().globalData.address + 'getDateRecord',

data: {

date:date,

openid:openid

},

header: {

'content-type': 'application/x-www-form-urlencoded' // 默认值

},

method: "POST",

success: function (res) {

result = res.data.recordList

},

fail: function (err) {

wx.showToast({

icon: "none",

title: '服务器异常，清稍候再试'

})

},

})

},

     就是这样啦，很简单，提供一种解决方案吧，我在这做个抛砖引玉的作用，希望能得到各位大佬的改进意见或者更好的解决方案。