Board logo

标题: 微信小程序中如何添加和删除class类名 [打印本页]

作者: xiexie    时间: 2020-6-7 09:59     标题: 微信小程序中如何添加和删除class类名

在微信小程序开发中,不能像普通web开发一样通过JS操作DOM,因此不能通过JSDOM操作直接为一个节点添加一个类。我们可以通过微信小程序数据绑定,再加上微信小程序中支持的三元判断表达式,去更改标签类名。

具体实现:以一个tab栏为例,在逻辑层定义一个数据activeClass,值为添加active类的索引。给每个tab中的view块绑定一个tabHandler事件,通过id属性向逻辑层传递点击的view块索引,对数据进行修改。

<view class="root">
  <!-- tab栏是固定高度的 -->  
  <view class="tabs">
    <view class="item {{ activeClass == 1 ? 'active':''  }}" id="1" bindtap="tabHandler">
      <text>个性推荐</text>
    </view>
    <view class="item {{ activeClass == 2 ? 'active':'' }}" id="2" bindtap="tabHandler">
      <text>歌单</text>
    </view>
    <view class="item {{ activeClass == 3 ? 'active':'' }}" id="3" bindtap="tabHandler">
      <text>主播电台</text>
    </view>
    <view class="item {{ activeClass == 4 ? 'active':'' }}" id="4" bindtap="tabHandler">
      <text>排行榜</text>
    </view>
  </view>
</view>
Page({
  data: {
    activeClass: 1,
  },
  tabHandler: function(e){
    var index = e.currentTarget.id;
    console.log(index)
    this.setData({
      activeClass :index
    })
  },
})






欢迎光临 PHP开发笔记 (http://phpvi.com/) Powered by Discuz! 6.1.0