微信小程序添加、删除class’

终于等到公司开发小程序了，学习的时候不觉得有什么，实际开发就会出现各种问题。

今天第一天开发就遇到问题了。

项目需求，要一个平时的nav导航栏，这玩意用jQuery两行代码解决了，可是小程序不允许操作dom啊；

折腾一个多小时最终找到两种方法，分享给大家；

第一种比较直接但是，不适合多个操作；

1，第一种感觉比较傻

<view class="{{num==0 ? 'active':''}}" bindtap="click1"></view>

<view    class="class{{num==1?'active':''}}"bindtap="click2"></view>

<view class=class="{{num==2 ? 'active':''}}" bindtap="click3"></view>

需要用到三目运算符，同时有多少个导航就要加多少事件。

 click1:function(){

         this.setData({

            num:1,

           num1:0,

           num2:0

        })

    },

    click2:function(){

        this.setData({

            num1:1,

             num:0,

           num2:0

        })

    },

     click3:function(){

        this.setData({

            num2:1,

             num1:0,

           num:0

        })

2,这种优化后感觉就不错了

 <view data-num = "1" class='trsZhi {{_num==1?"trsActive":""}}' bindtap="tapHan">地址翻译</view>

  <view data-num = "2" class='trsZhi {{_num==2?"trsActive":""}}' bindtap="tapHan" >机构翻译</view>

  <view data-num = "3" class='trsZhi {{_num==3?"trsActive":""}}' bindtap="tapHan">人名翻译</view>

加一个data属性，只需要一个事件操作。

 tapHan:function(e){

    console.log(e.target.dataset.num)

    this.setData({_num: e.target.dataset.num}) 
 

  }

代码简洁多了，同时也可以选择默认第一个为active，只需要在data里面声明就行了

data: {
_num:"1"
},

巴特西

微信小程序添加、删除class’

最新文章

热门文章