小程序循环实现单个显示隐藏(秒会)

小程序循环实现单个显示隐藏

获取小程序循环里面的值，实现单个隐藏显示，废话不多说，直接上代码

.wxml

<view bindtap="clase" wx:for="{{content}}" wx:key="{{content}}" data-id="{{item.id}}"><!--把ID传过去-->
    1
   <view hidden="{{item.insert?'true':''}}">{{item.uname}}</view><!-- 默认为true隐藏 点击的时候为null就是控制显示 -->
</view>

.js

Page({
  data: {
    content:[
      {
        id:1,
        uname:'测试1'
      },
      {
        id:2,
        uname:'测试2'
      }
    ]
  },
  clase: function (e) {
    let that = this
    let index = 0;
    let array = this.data.content;//获取循环数组对象
    for (let item of array) {
      //如果当前点击的对象id和循环对象里的id一致
      if (item.id == e.currentTarget.dataset.id) {
        //判断当前对象中的insert是否为true（true为显示，其他为隐藏） insert是新增的一个值然后进行判断
        if (array[index].insert == "" || array[index].insert == undefined) {
          array[index].insert = "true"
        } else {
          array[index].insert = ""
        }
      }
      index++;
    }
    //将数据动态绑定 
    that.setData({
      content: array
    })
  },
})

代码非常少，主要看注释，方便理解，有什么问题欢迎评论留言，我会及时回复你的。