wxml
<view class='text'>
<text>方法一</text>
</view>
<view wx:for="{{list}}" wx:key="content" wx:for-index="key">
<view class='title' data-index='{{key}}' bindtap='hiddenBtn'>
<label>aaa {{item.id+1}}</label>
</view>
<view hidden='{{item.hidden}}'>
<view class='line'></view>
<view class='content'>
<label>bbb</label>
</view>
</view>
<view class='line_bottom'></view>
</view>
<view class='text'>
<text>方法二</text>
</view>
<view wx:for="{{listCon}}" wx:key="content" wx:for-index="key">
<view class='title' data-index='{{key}}' bindtap='hiddenBtnCon'>
<label>aaa {{item.id+1}}</label>
</view>
<view class='{{item.hidden == false? "hide":"show"}}'>
xxxx
</view>
<view class='{{item.hidden == true? "hide":"show"}}'>
<view class='line'></view>
<view class='content'>
<label>bbb</label>
</view>
</view>
<view class='line_bottom'></view>
</view>
wxss
.text{
background-color: #eee;
padding: 5rpx;
}
/*标题 */
.title{
padding: 15rpx;
}
/*内容 */
.content{
padding: 25rpx 30rpx;
background-color: #ddd
}
.line{
border: 1rpx solid #eee;
}
.line_bottom{
border: 8rpx solid #eee;
}
/*隐藏 */
.hide{
display: none;
}
/*显示 */
.show{
display: block;
}
js
data: {
list: [
{ 'id': 0, 'hidden': true },
{ 'id': 1, 'hidden': true },
{ 'id': 2, 'hidden': true },
],
listCon: [
{ 'id': 0, 'hidden': true },
{ 'id': 1, 'hidden': true },
{ 'id': 2, 'hidden': true },
]
},
// 方法一
hiddenBtn: function (e) {
var that = this;
// 获取事件绑定的当前组件
var index = e.currentTarget.dataset.index;
// 获取list中hidden的值
// 隐藏或显示内容
that.data.list[index].hidden = !that.data.list[index].hidden;
that.setData({
list: that.data.list
})
},
// 方法二
hiddenBtnCon: function (e) {
var that = this;
var index = e.currentTarget.dataset.index;
that.data.listCon[index].hidden = !that.data.listCon[index].hidden;
that.setData({
listCon: that.data.listCon
})
},