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

最新推荐文章于 2024-08-04 19:01:28 发布

superKM

最新推荐文章于 2024-08-04 19:01:28 发布

阅读量5.2k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：列表信息展示和隐藏

本文链接：https://blog.youkuaiyun.com/superKM/article/details/79665945

微信小程序专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种在微信小程序中实现多列数据显示与隐藏的方法。通过使用wx:for循环遍历数据数组，并结合bindtap事件及data-id属性来标识和触发子列表的展开与收起。利用CSS控制元素的显示状态，实现良好的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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