小程序遍历动态改变指定元素样式

任务描述：想做一个遍历所有元素然后点击其中某个元素动态的改变该元素样式，再次点击会切换回原来的样式，在整个过程中，只会改变点击元素的样式，并不会影响其余元素的样式。网上也找过不少实现，发现讲述的都不是很清楚，尤其是代码常常有bug，故整理这篇文章，代码写的不怎么样，关键是实现。

话不多说上代码：
WXML

<canvas canvas-id="myCanvas" style="border: 1px solid; width: 375px;height: 375px;margin-top: 15px;"
  bindtouchstart="start"
  bindtouchmove="move"
  bindtouchend="end">
<movable-area style="height: 375px;width: 375px;">
  <view wx:for="{{checkbox}}" data-key='{{index}}'>
    <movable-view class="{{status[index]==0?'ttt1':'ttt2'}}" data-key='{{index}}' catchtap="change" direction="all" style=" background:pink ;">
    {{index}}
    </movable-view>
</view>
</movable-area>
</canvas>
<view hidden="{{hidden}}">
  Coordinates: ({{x}}, {{y}})
</view>
<button style="width: 100px" bindtap="insert">增加按钮</button>

image.png

这部分代码和我的业务需求有关，就是在一个区域内，通过点击增加按钮动态添加元素，逻辑写在了js文件里，该元素我用的是可拖动组件，换成普通的view也是一个道理。遍历checkbox，也就是将所有的元素都输出在界面上，通过status[index]来判断以及改变每个元素的状态，因为我这里一共就只有两种样式，所以我的状态status也就只是0和1。这个status是一个状态数组，可以理解为每个元素的状态的一个集合，详见js代码部分。

通过点击，只改变点击的元素的样式

image.png

Page({
  data: {
    x: 0,
    y: 0,
    checkbox: [],
    status: [],
    current_id: 0,
    hidden: true
  },
  start: function(e) {
    this.setData({
      hidden: false,
      x: e.touches[0].x,
      y: e.touches[0].y
    })
  },
  move: function(e) {
    this.setData({
      x: e.touches[0].x,
      y: e.touches[0].y
    })
  },
  end: function(e) {
    this.setData({
      hidden: true,
    })
  },
  change: function(e){  
    console.log("test");
    let index = e.currentTarget.dataset.key;
    console.log(index);
    if(this.data.status[index] == 1){
      this.data.status[index] = 0;
  }else{
      this.data.status[index] = 1;
  }
  this.setData({
    status: this.data.status
  });
  console.log(this.data.checkbox)
  },

  insert: function() {
    var cb = this.data.checkbox;
    var sta = this.data.status;
    cb.push(this.data.checkbox.length);
    sta.push(0);
    console.log(sta);
    this.setData({
      checkbox: cb,
      status: sta
    });
  }
})

这部分的代码就讲两个点，insert函数中，每增加一个元素，同时在status数组重生成该元素的status，默认为0，其实在这里我们化繁为简了，我一开始想实现直接在元素的数组checkbox中直接添加status信息，但是因为这个数组是动态添加的，没有办法去动态添加这样一个状态信息。于是我们想到通过索引对应，新开一个数组，一个索引的status就对应到该索引下的checkbox元素；然后change事件中，每点击一次待改变样式的元素，都会进行一次判断，判断该元素的status是0还是1，改变自身状态，原来是0就变成1，原来是1就变成0。
WXSS

/* pages/display/display.wxss */
.ttt1{
  width: 100px;
  height: 50px;
}
.ttt2{
  width: 50px;
  height: 100px;
  }

最后编辑于：2020.05.18 10:54:47