微信小程序中如何添加和删除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})},
})

效果如图：

微信小程序中如何添加和删除class类名相关推荐

微信小程序中动态添加删除class类名使用三元表达式动态设置标签的class名
目的,在微信小程序的swiper中达到除了active的哪一项外的其他项都有一个半透明的白色浮层. 效果图如下: 功能实现: 我们使用三元表达式即可实现动态设置标签中的class属性如下: < ...
微信小程序，动态添加和删除表单项
环境小程序 UI 组件: Vant Weapp index.wxml 在index.wxml文件中编写主要的结构代码,例如添加.删除按钮. 内心os:你都用UI组件了,为啥还要用官方的picker ...
微信小程序之动态添加、删除指定view和获取input值
遇到的问题: 动态的添加指定的view内容..嗯..很简单..wx:for就搞定!! 动态添加的内容中有input,最终获取值的时候,要获取到所有input的值并且是一个数组. 动态删除指定的已经添加 ...
微信小程序中的添加收获地址的流程
1.添加收获地址的解析 1.首先我们要给添加收获地址设置点击事件2.然后在通过微信官方文档给我们提供的一个方法来进行添加本地存储3.判断本地里面是否有存在的内容,如果有的话显示内容,如果没有那么就显示 ...
微信小程序基础-动态添加和删除组件
一.基本思路 1.通过改变数组长度动态增删组件 <block wx:for="{{数组}}">组件 </block> 2.点击添加按钮,增加数组的成员,组件 ...
微信在线客服 php,微信小程序中添加联系在线客服功能
这次给大家带来微信小程序中添加联系在线客服功能,微信小程序中添加联系在线客服功能的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 普通客服按钮添加客服-联系我们 2. 悬浮客服按钮添加,图片自 ...
在微信小程序中动态的添加类名
在微信小程序中动态的添加类名 <view data-num="1" class="takeTaxi {{_num == 1 ? 'active' : ''}}&qu ...
在微信小程序中使用LeanCloud（1）
之前学习了微信小程序前端,使用到LeanCloud线上数据库 [传送门]https://leancloud.cn/docs/weapp.html.作为一个前端开发人员,了解后端及数据库是学习工作的需要 ...
微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...

微信小程序中如何添加和删除class类名

微信小程序中如何添加和删除class类名相关推荐

最新文章

热门文章