点击后隐藏或显示某一行数据。在小程序开发时，经常需要实现在点击完列表中的某一行数据后，就能展开其对应的相关内容或隐藏其对应的内容
index.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 == true? "hide":"show"}}'>
<
view
class=
'line'></
view
>
<
view
class=
'content'>
<
label
>bbb
</
label
>
</
view
>
</
view
>
<
view
class=
'line_bottom'></
view
>
</
view
>
index.wxss
.text{
background-color:
#eee;
padding:
5
rpx;
}
/*标题 */
.title{
padding:
15
rpx;
}
/*内容 */
.content{
padding:
25
rpx
30
rpx;
background-color:
#ddd
}
.line{
border:
1
rpx
solid
#eee;
}
.line_bottom{
border:
8
rpx
solid
#eee;
}
/*隐藏 */
.hide{
display:
none;
}
/*显示 */
.show{
display:
block;
}
index.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
})
},
