小程序开发：改变data中数组或对象的某一属性值

最新推荐文章于 2022-02-19 22:40:43 发布

OnexTwo

最新推荐文章于 2022-02-19 22:40:43 发布

阅读量737

点赞数

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/qq_41105058/article/details/89527602

版权

小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近在做一个小程序页面的时候需要在一个列表渲染里点中一个view，这个view背景变白，其他的view保持原始状态背景蓝色。

效果如图。

代码情况如下：

<view class="modelLayout2">
<view class="timeSelection" hover-class='pressed' hover-stay-time='100' wx:for="{{timeSelectionList}}" >

<view>

  ....
 dateList:[
     {
       month:4,
       day:24,
       classVar: "dateLayout",/**样式变量 按下是dateLayoutPressed 正常是dateLayout */
     },
     {
       month:4,
       day:25,
       classVar: "dateLayoutPressed",/**样式变量 按下是dateLayoutPressed 正常是dateLayout */
     }
   ],
....
timeSelectionClick:function(e){
    console.log("wdwqdqwd")
    var i = e.currentTarget.dataset.index;
   var array=this.data.dateList;
   array.forEach((item,index,attr)=>{
    var allItem="dateList["+index+"].classVar";
    this.setData({
      [allItem]:"dateLayout"
    })
    if(index==i){
      var allItem1 = "dateList[" + index + "].classVar";
      this.setData({
        [allItem1]:"dateLayoutPressed"
      })
    }
   })
  }

总的来说，需要主要两个点：wx：key的设置，然后就是循环遍历设置view的样式就可以了