微信小程序笔记(一)——点击显示或隐藏某一行数据

 点击后隐藏或显示某一行数据。在小程序开发时，经常需要实现在点击完列表中的某一行数据后，就能展开其对应的相关内容或隐藏其对应的内容 

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>bbblabel>

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

})

},