微信小程序动态添加类名，切换class类名

已于 2022-02-23 14:09:57 修改
阅读量5.4k 收藏 5
点赞数 2
分类专栏： css 微信小程序 文章标签： 微信小程序 小程序 javascript
于 2022-02-23 12:01:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41733299/article/details/123086965
版权

先上效果图：

 

 

微信小程序切换导航栏，因为微信小程序不能与jQuery一样用dom属性，例如addclass，removeclass这样的方法，就相对来说麻烦一点，可是有时候需要做切换导航栏这样的操作，参考代码如下：

wxml：

<view class="header-sort-nav">
  <view bindtap="tapHan" class='sort-li {
  {_index==1?"nav-checked":""}}' data-index="1">招生通告</view>
  <view bindtap="tapHan" class='sort-li {
  {_index==2?"nav-checked":""}}' data-index="2">院校</view>
</view>

css：

.header-sort-nav {
最低0.47元/天 解锁文章
_(:* ｣∠)_alray
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信小程序中如何添加和删除class类名
weixin_43509051的博客
08-28 3437
在微信小程序开发中，不能像普通web开发一样通过JS操作DOM，因此不能通过JSDOM操作直接为一个节点添加一个类。我们可以通过微信小程序数据绑定，再加上微信小程序中支持的三元判断表达式，去更改标签类名。 具体实现：以一个tab栏为例，在逻辑层定义一个数据activeClass，值为添加active类的索引。给每个tab中的view块绑定一个tabHandler事件，通过id属性向逻辑层传递点击的...
微信小程序动态切换class类名
热门推荐
猿飞梦的博客
03-27 2万+
之前用jquery时我们可以使用： $(".classify").eq(0).addClass("addStyleMi").siblings().removeClass("addStyleMi"); 动态的为元素切换类名，添加css样式。 但是微信小程序中不提供操作Dom的方法，但我们也可以实现为元素动态切换类名。 效果图： ...
微信小程序class动态绑定
最新发布
yangmin_kk的博客
04-30 1215
示例是除最后一条都加下划线并且除第一条给padding-top:10。(最外层要加上"[]"，不然不生效)示例是除最后一条都加下划线（微信小程序使用动态class前面不需要冒号）
微信小程序点击移除添加class（点击改变背景颜色和字体颜色）
03-29
微信小程序不允许DOM操作，所以不能用addClass这种方法，我的用法如下。点击元素后，获取元素中data-select值，赋值给catalogSelect，然后判断二者是否相等，一样则添加class（class的css可以先写好）。 !--页面-- v ...       微信小程序不允许DOM操作，所以不能用addClass这种方法，我的用法如下。 点击元素后，获取元素中data-select值，赋值给catalogSelect，然后判断二者是否相等，一样则添加class（class的css可以先写好）。 (此图片来源于网络，如有侵权，请联系删除! ) <view cl
小程序 动态绑定class
路漫漫其修远兮，吾将上下而求索
10-12 1万+
微信小程序提供了比较便捷的语法，使我们能够快速地动态绑定class 用法：<view class="{{ 表达式?'A':'B'}}" ></view> 在一个标签的class里添加{{}}模板语法，模板里面是一个三元判别式，其中表达式一般引用data中的属性，表达式返回true或者false，A，B是class名，按照三元判别式的逻辑引用A或B。 PS： 当然可以同时引用多个，如<view class="E F {{表达式?'A':'B' }} {{表达式?'C...
微信小程序 动态添加类名
仲广绪的博客
05-09 3803
微信小程序 动态添加类名 和vue的语法差不多，一个小测试 <view class="list-top"> <view data-num="1" class="list-menu list-menu1 {{_num==1?'active':''}}" bindtap="menuClick">头条</view> <view data-num="2" class="list-menu list-menu2 {{_num==2?'active':''}}" bindta
微信小程序实现动态添加class的功能，其实这样做就可以了
qq_44415875的博客
04-04 5046
*思路：**网页中可能使用document.getElementById().addClass()实现，但是在小程序中无法使用document获取元素。小程序可以构造一个数据结构，根据业务需求动态修改数据去判断是否添加选中样式。
微信小程序动态选择class改变样式
weixin_42017221的博客
11-03 517
【代码】微信小程序动态选择class改变样式。
微信小程序框架wepy之动态控制类名
12-29
本文为大家分享了微信小程序框架wepy之动态控制类名的具体实现方法，供大家参考，具体内容如下 控制类名 style <style lang=less scoped> .liBkgCor { background-color: red; } </style> template...
微信小程序如何像vue一样在动态绑定类名
08-27
微信小程序如何像vue一样在动态绑定类名 微信小程序在动态绑定类名方面与Vue的区别主要体现在以下几个方面： 1. 条件渲染：Vue使用v-if指令，微信小程序使用wx:if指令来实现条件渲染。 2. 显示隐藏元素：Vue使用v-...
微信小程序中的列表切换功能实例代码详解
10-15
在微信小程序开发中，列表切换功能是一个常见的交互设计，它允许用户在多个列表之间进行平滑的切换，提供丰富的用户体验。本篇文章将深入探讨如何实现这一功能，并通过实例代码进行详细解析。 首先，我们需要理解...
微信小程序animatecss插件界面切换动画
03-01
在微信小程序中，我们可以利用外部库如Animate.css来为页面切换添加酷炫的动画效果，提升用户体验。Animate.css是一个预定义的、易于集成的CSS动画库，可以帮助开发者快速实现各种视觉特效。 标题中的“微信小程序...
微信小程序中如何动态添加 class 属性
wbskb的博客
08-20 6389
如何在微信小程序动态添加 class 属性，如何在微信小程序组件中动态添加 class 属性
微信小程序动态绑定class样式类
海贼王某人的博客
03-23 6552
话不多说，直接上代码，循环列表，根据选中状态显示不同的样式，active就是你在wxss文件里面创建的类名 <view class="{{item.select ? 'active':''}}" wx:for="{{itemList}}" wx:key="{{item.id}}"> {{item.name}} </view> ......
微信小程序：动态控制class属性
会编程的林俊杰的博客
11-16 1万+
一、需求： 点击一个选项，让其出现不同于其他选项的样式，比如选项文字的颜色变红。 二、初步解决方案： 可以设置一个活跃选项的数据来记录选中选项的下标（默认为0），其次选中其他选项时可以通过点击事件获取到所选选项的下标，并赋值给活跃选项。要点击的选项是 wx:for 循环出来的，所以接下来就是通过一个三元运算来判断每个循环的元素是否被选中，选中则加特殊样式。 js： cateActive:'0',//活跃选项下标 clickCate(e){ console.lo...
微信小程序点击添加class类名，再点击移除（取消）class（即切换class类名）
coderYYY的博客
10-09 3617
小程序点击按钮添加class类名（选中单个按钮），再点击原先选中的，移除类名（取消选中）
uniapp_微信小程序_说下动态class（实用性很强）
apple_70049717的博客
03-02 811
/ 以上图片为例,里面的参数是后端传给你的，你不知道有多少东西，更不可能一个一个改，所以引入动态class。
小程序中使用函数动态定义标签类名
乌云和闪电在雨天里重逢
12-28 537
使用wxs模块动态定义类名 1、使用wxs标签 // wxml <text class="{{cm.style(status)}}">{{status==0?'审核中':status==1?'认证成功':status==2?'认证失败'}}</text> <wxs module="cm"> var checkClass = function(status){ ...
微信小程序开发 vue 动态添加class类名
07-14
在微信小程序开发中使用Vue，你可以通过动态绑定class属性来实现动态添加class类名的效果。以下是一个示例： 首先，在Vue的data中定义一个变量，用于控制是否添加特定的class类名，比如： ```javascript data() { return { isDynamicClass: false }; }, ``` 然后，在模板中使用`v-bind`或简写的`:`来动态绑定class属性，根据`isDynamicClass`的值来决定是否添加特定的class类名，例如： ```html <template> <div :class="{ 'dynamic-class': isDynamicClass }"> <!-- 内容 --> </div> </template> ``` 在上述代码中，当`isDynamicClass`为`true`时，将会添加名为`dynamic-class`的class类名。 最后，你可以在适当的时机修改`isDynamicClass`的值，从而实现动态添加或移除class类名的效果。例如，在某个按钮的点击事件中修改该变量的值： ```javascript methods: { toggleDynamicClass() { this.isDynamicClass = !this.isDynamicClass; } } ``` 通过调用`toggleDynamicClass()`方法，可以切换`isDynamicClass`的值，从而动态添加或移除class类名。 希望以上信息对你有所帮助！如果你还有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_(:* ｣∠)_alray

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值