微信小程序——动态改变循环列表中的某一个元素样式

首先来看一下效果：

说一下思路：从后台传来的json，然后微信小程序端通过wx:for方法渲染出来，可以看到，一开始的按钮状态status都是灰色，（自定义0为灰色，1为彩色）。如果想要一次点击修改全部元素内容的话，那么对这些按钮设置一个status变量即可，通过改变按钮的status=1，按钮在循环队列中则会全部变为1。

如果想要达到顶部图片的效果。那么以下进入正题：

通过图片可以发现，我们在点击事件中只是修改了当前元素的内容，而其他元素并没有改变。我们又知道，数组里面每个数组元素都有一个下标，这个渲染内容是因为这个数组元素的不同而产生的效果，想到这里，成功了一半啦！^o^

接下来的一半，就是我们如何获取下标对应的数组元素，然后去修改它。

这里我针对小程序端来讲解，而对于点击事件post的处理就根据自己的需求设计。

我们来看看界面样式的设计：

<!--mission.wxml-->
<view class="container">
  <view class="mission-item" wx:for="{{getPost}}" wx:key='id'>

      <!--领取任务样式-->
      <view class='mission-icon' wx:if = "{{item.status == 0}}">
         <view class='missionfont' data-index = '{{index}}' 
             catchtap="acceptMission">
                领取任务
         </view>
      </view>
    
      <!--取消任务样式-->
      <view class='accept-mission-icon' wx:if = "{{item.status == 1}}">
         <view class='acceptfont' data-index = '{{index}}'
              catchtap="cancelMission">
                 正在行动
         </view>
      </view>

   </view>
</vew>

这段代码中有两个关键的地方：

①data-index = '{{index}}'     这串代码用得也比较多，我是这样理解的：前半部分data-index相当于声明一个接口，等号后面的内容“{{index}}”，其实就是数组对应元素的下标。这一整句，可以理解为接口和其中的内容绑定起来（不另外定义的话，默认下标就是index）

②catchtap。这里要跟bindtap区分一下，首先它们两个都是点击事件，但是又有些许的不同。bindtap是冒泡事件，会一直向上执行，catchtap刚好相反。选择上一般根据需求使用。

设计好xml布局之后，来看看js的核心部分应该怎么写。

我们先来想一下算法：获取布局对应元素的下标>>>>>找到对应按钮>>>>>判断该按钮的状态>>>>>改变状态>>>>>重新赋值数组。

一、领取任务事件：

Page({

 data:{
  Mission:[]
 }

//领取任务
 acceptMission: function (e) {
    // 获取当前点击下标    
    var Index = e.currentTarget.dataset.index;
    console.log(Index);
    // data中获取列表   
    var missionArr = this.data.Mission;
    for (let i in missionArr) {
      //遍历列表数据      
      if (i == Index) {
        //根据下标找到目标,改变状态  
        if (missionArr[i].status == 0) {
          missionArr[i].status = parseInt(missionArr[i].status) + 1
        }
      }
    }

    //数组重新赋值
    this.setData({
      Mission: missionArr
    })

    wx.showToast({
      title: '领取成功',
    })
  },


})

二、取消任务，改变状态即可：

Page({

 data:{
  Mission:[]
 }

//取消任务
 cancelMission: function (e) {
    // 获取当前点击下标    
    var Index = e.currentTarget.dataset.index;
    console.log(Index);
    // data中获取列表   
    var missionArr = this.data.Mission;
    for (let i in missionArr) {
      //遍历列表数据      
      if (i == Index) {
        //根据下标找到目标,改变状态  
        if (missionArr[i].status == 1) {
          missionArr[i].status = parseInt(missionArr[i].status) - 1
        }
      }
    }

    //数组重新赋值
    this.setData({
      Mission: missionArr
    })

    wx.showToast({
      title: '取消成功',
    })
  },


})

在点击事件触发的时候，还可以想服务器发送请求获得自己需要的功能，鉴于每个小伙伴的功能都不一样，就不过多展开叙述了，不过大体的方法都差不多的。

原子核+电子=原子，努力+坚持=成功。