码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2017-08-15 21:15:30      阅读:313      评论:0      收藏:0      [点我收藏+]

标签:ndt   添加   pre   nbsp   bind   dataset   ==   选择   targe   

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

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

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

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

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

 

1,第一种感觉比较傻

    

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

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

标签:ndt   添加   pre   nbsp   bind   dataset   ==   选择   targe   

原文地址:http://www.cnblogs.com/wyfeng1/p/7367328.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!