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

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

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: 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;}

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 }) },