微信小程序事件点击后如何动态增删class类名（自用，没毛病）

忘是亡心i 2023-05-31 03:09 14阅读 0赞

问了度娘很久，感觉很多例子都用不到开发上，综合了三个小时。有了完整的方案

# 第一种 后台获取list集合,js中判断动态修改js #

# 第二种 手动定义list集合,js中判断动态修改js #

## 流程 ##

后台返回了一个List保存在page中，wxml中 wx.for循环遍历。然后动态点击，调整class的样式

##### 案例效果 （圈住的部分为例子，点击哪个语言，哪个标签就变黄） #####

###### 第一种效果图 ######

![在这里插入图片描述][20191023100944712.gif]

###### 第二种效果图 （这三个标签，是固定的，不是后台获取的） ######

![在这里插入图片描述][20191023101006514.gif]

# 第一种 ----------后台动态获取，前台动态修改class #

# 代码部分： #

##### 简易流程：在wxml中 使用 for循环时候的 index索引。当标签点击的时候 使用data-index=\{ \{index\}\} 将index传值，与js中定义的 \_tapLatitude 变量作比较，如果相同就使用 orgecol 这个class #####

### 刚开始看有点晕，多想一下就明白了 ###

wxml 文件的 wx.for循环

<view  wx:for="{ {languageList}}" wx:for-item="language" wx:for-index="index" class="viewlabel { {_tapLatitude==index?'orgecol':''}}" data-name="{ {language}}" data-index="{ {index}}" bindtap="getLanguage">
              { { language}}
     </view>

js中的

Page({ 
    
      /** * 页面的初始数据 */
      data: { 
       _tapLatitude:-1,//语种点击 存储变量
       },
    
     //排序语种获取
      getLanguage : function (e) { 
        //因为是标签。所以再点一下就要取消
        if (that.data._tapLatitude == e.currentTarget.dataset.index){ 
        this.setData({ 
         _tapLatitude:-1, //值还原
         })
        }else{ 
         this.setData({ 
          _tapLatitude: e.currentTarget.dataset.index, //获取index传入的值。与定义全局变量作比较
         })
         }
       
      },
    
    })

# 第二种 ----------wxml中固定，js中动态修改class #

#### 流程思路同第一种 都用定义一个变量 ####

wxml 文件中的代码

<view class="viewcontentone" >
          <view class="contover { {_tapSort==1?'orige':''}} " bindtap="getSort" data-name="距离排序" data-id="1">{ { sortItemLists[0]}}</view>
          <view class="contover { {_tapSort==2?'orige':''}}"  bindtap="getSort"  data-name="星级排序" data-id="2">{ { sortItemLists[1]}}</view>
          <view class="contover { {_tapSort==3?'orige':''}}"  bindtap="getSort"  data-name="单量排序" data-id="3">{ { sortItemLists[2]}}</view>
     </view>

js 文件中的代码

Page({ 
    
      /** * 页面的初始数据 */
      data: { 
       sortItemLists: ['距离排序', '星级排序','单量排序'],//导游排序列表
       _tapSort:3,//排序点击 存储变量 设置3 因为默认使用3排序
       },
    
      //修改排序的值字段
      getSort: function (e) { 
        var that = this;
        let sortItemId = e.currentTarget.dataset.id
        that.setData({ 
          "_tapSort": sortItemId
        })
      },
    
    })

因为每个项目业务不同，所有会有一些偏差。因为代码是剪切式。如有遗漏看不懂的地方以及问题留言哈！

[20191023100944712.gif]: /images/20230531/4033e5105c5d4801a054e40f0582436f.png
[20191023101006514.gif]: /images/20230531/73ae0b2e13b440cda873933f53fc510f.png