实现多列数据显示和隐藏,效果图
由于小程序不支持dome操作,因此使用 wx:for 方法实现效果
wxml:
<!--
searchArray 循环遍历的对象
wx:for-item="item" 别名item
bindtap='showList' 绑定点击事件
data-id='{{item.id}}' 将对象id添加到点击列表上
-->
<view class="search_city_li" wx:for="{{searchArray}}" wx:for-item="item" wx:key="">
<view class="search_city_list" bindtap='showList' data-id='{{item.id}}'>
{{item.name}}
</view>
<!--根据{{item.isShow?'show':'hide'}} 判断显示和隐藏,
show和hide的css一个是diaplay:block,一个是 diaplay:none-->
<view class=" {{item.isShow?'show':'hide'}}">
<view class="search_city_list_child" wx:for="{{item.child}}" wx:for-item="child" wx:key="">
<view class="list_child_cyty">{{child.name}}</view>
</view>
</view>
</view>
js:
Page({
/**
* 页面的初始数据
*/
data: {
searchArray: [{
name: "海南省",
id: "01",
child: [{
id: "01-1",
name: "郑州"
}, {
id: "01-2",
name: "开封"
}, {
id: "01-3",
name: "开封3"
}]
}, {
name: "河南",
id: "02",
child: [{
id: "02-1",
name: "郑州1"
}, {
id: "01-2",
name: "开封1"
}]
}]
},
showList(e) {
let index = 0;
let arrayItem = this.data.searchArray;//获取循环数组对象
for (let item of arrayItem) {
//如果当前点击的对象id和循环对象里的id一致
if (item.id == e.currentTarget.dataset.id) {
//判断当前对象中的isShow是否为true(true为显示,其他为隐藏)
if (arrayItem[index].isShow == "" || arrayItem[index].isShow == undefined) {
arrayItem[index].isShow = "true"
} else {
arrayItem[index].isShow = ""
}
}
index++;
}
//将数据动态绑定
this.setData({
searchArray: arrayItem
})
},
onLoad: function (options) {
}
})
就可以实现数据的展示和隐藏了