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

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

浏览量:465 时间: 来源:weixin_34005042

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

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

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

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

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

 

1,第一种感觉比较傻

    

view class="{{num==0 ? 'active':''}}" bindtap="click1"1/viewview    class="class{{num==1?'active':''}}"bindtap="click2"2/viewview class=class="{{num==2 ? 'active':''}}" bindtap="click3"3/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"
 },

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎