任務(wù)描述：想做一個遍歷所有元素然后點擊其中某個元素動態(tài)的改變該元素樣式盒至，再次點擊會切換回原來的樣式酗洒，在整個過程中，只會改變點擊元素的樣式枷遂，并不會影響其余元素的樣式樱衷。網(wǎng)上也找過不少實現(xiàn)，發(fā)現(xiàn)講述的都不是很清楚酒唉，尤其是代碼常常有bug矩桂，故整理這篇文章，代碼寫的不怎么樣痪伦，關(guān)鍵是實現(xiàn)侄榴。

話不多說上代碼：
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

這部分代碼和我的業(yè)務(wù)需求有關(guān)雹锣，就是在一個區(qū)域內(nèi)，通過點擊增加按鈕動態(tài)添加元素癞蚕，邏輯寫在了js文件里蕊爵，該元素我用的是可拖動組件，換成普通的view也是一個道理桦山。遍歷checkbox攒射，也就是將所有的元素都輸出在界面上，通過status[index]來判斷以及改變每個元素的狀態(tài)恒水，因為我這里一共就只有兩種樣式匆篓，所以我的狀態(tài)status也就只是0和1。這個status是一個狀態(tài)數(shù)組寇窑，可以理解為每個元素的狀態(tài)的一個集合鸦概，詳見js代碼部分。

通過點擊甩骏，只改變點擊的元素的樣式

image.png

JS

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函數(shù)中，每增加一個元素饮笛，同時在status數(shù)組重生成該元素的status咨察，默認(rèn)為0，其實在這里我們化繁為簡了福青，我一開始想實現(xiàn)直接在元素的數(shù)組checkbox中直接添加status信息摄狱，但是因為這個數(shù)組是動態(tài)添加的，沒有辦法去動態(tài)添加這樣一個狀態(tài)信息无午。于是我們想到通過索引對應(yīng)媒役，新開一個數(shù)組，一個索引的status就對應(yīng)到該索引下的checkbox元素宪迟；然后change事件中酣衷，每點擊一次待改變樣式的元素，都會進行一次判斷次泽，判斷該元素的status是0還是1穿仪，改變自身狀態(tài)，原來是0就變成1意荤，原來是1就變成0啊片。
WXSS

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