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

版权声明:转载需征得博主同意,侵删。 https://blog.csdn.net/qq_39635610/article/details/86542387

首先来看一下效果:

说一下思路:从后台传来的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: '取消成功',
    })
  },


})

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

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

 

没有更多推荐了,返回首页