【微信小程序遇到的坑】多列信息数据显示和隐藏

2021年5月9日 106次阅读 来源: superKM

实现多列数据显示和隐藏，效果图

《【微信小程序遇到的坑】多列信息数据显示和隐藏》

由于小程序不支持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) { 
    
  }
})

就可以实现数据的展示和隐藏了

     原文作者：superKM
     原文地址: https://blog.csdn.net/superKM/article/details/79665945
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。 
  点赞