微信小程序动态切换class类名

傷城~ 2022-02-27 08:34 1763阅读 0赞

之前用jquery时我们可以使用：

$(".classify").eq(0).addClass("addStyleMi").siblings().removeClass("addStyleMi");

动态的为元素切换类名，添加css样式。

但是微信小程序中不提供操作Dom的方法，但我们也可以实现为元素动态切换类名。

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDgxNTEy_size_16_color_FFFFFF_t_70][]            ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDgxNTEy_size_16_color_FFFFFF_t_70 1][]

图1                                                                        图2

![20190327110627452.png][]

重点是这句代码

下面是完整的代码：

js:

data: {
        // --------二级分类---------
        first_names:[
          {
            "id":1,
            "goods_name":"食品土特产"
            },
          {
            "id":2,
             "goods_name": "健康器械"
              },
          { 
            "id":3,
            "goods_name": "营养保健" 
            
            },
          {
            "id": 4,
            "goods_name": "健康调理"
    
          },
          {
            "id": 5,
            "goods_name": "保护眼睛"
    
          },
          {
            "id": 6,
            "goods_name": "骨骼健康"
    
          },
          {
            "id": 7,
            "goods_name": "滋补养生"
    
          },
          {
            "id": 8,
            "goods_name": "增强免疫"
    
          },
          {
            "id": 9,
            "goods_name": "国内旅游"
    
          },
        ],
        first_id:0,//用于判断是否是当前选中的
       
        
      },
     // -------动态切换class---------
      menuClick: function (e) {
        var that = this;
        var index = e.currentTarget.dataset.index;//获取当前点击的元素下标
        console.log(index);
        that.setData({
          first_id: index
        })
      },

wxml:(scroll-view用于滑动)

<view class='moreBoxs'>
      <scroll-view class="navContent" scroll-x>
        <view class="classify {
       {first_id==index?'addStyleMi':''}}" bindtap="menuClick" wx:for='{
       {first_names}}' wx:key='{
       {index}}' wx:for-item="first_names" wx:for-index="index" data-postid='{
       {first_names.id}}' data-index='{
       {index}}' data-postname='{
       {first_names.goods_name}}'>
          <text>{
       {first_names.goods_name}}</text>
        </view>
      </scroll-view>
    </view>

wxss:

/* 分类开始 */
    .moreBoxs{
        width: 100%;
        height: 102rpx;
        border-bottom: solid 2rpx #e5e5e5;
        position: fixed;
        top: 0;
        background-color: #ffffff;
        z-index: 500;
    }
    
    .navContent{
        width: 100%;
        height: 102rpx;
        white-space: nowrap;
    }
    .classify {
    	height: 102rpx;
    	/*width: 8%;*/
    	margin-left: 42rpx;
    	line-height: 102rpx;
    	text-align: center;
    	
    	font-size: 28rpx;
      display: inline-block;
    }
    
    .addStyleMi {
    	height: 96rpx;
    	border-bottom: solid 6rpx #eb3737;
    	font-weight: bold;
    	color: #eb3737;
    	font-size: 28rpx;
    }
    /* ---------隐藏滚动条 */
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDgxNTEy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190327110406404.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDgxNTEy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDgxNTEy_size_16_color_FFFFFF_t_70 1]: /images/20220227/fac713eefe7f432ea87badc603c552b7.png
[20190327110627452.png]: /images/20220227/fc7f5fa0b1fb41bda6de7666610986d1.png