微信小程序如何动态增删class类名

最新推荐文章于 2024-08-15 18:54:04 发布

刘翾

最新推荐文章于 2024-08-15 18:54:04 发布

阅读量7.8w

点赞数 8

分类专栏：微信小程序文章标签：微信微信小程序class 小程序class增改

本文链接：https://blog.csdn.net/c_kite/article/details/72899520

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

简述

由于微信小程序开发不同于以往的普通web开发, 因此无法通过js获取wxml文件的dom结构, 因此从js上直接添加一个类名应该不可能了. 可是我们可以通过微信小程序数据绑定以及view标签的”data-“自定义属性去更改标签类名.

说明

通过数据绑定在3个标签上绑定相同的变量_num, 当点击不同标签时, 在js逻辑层中通过event.target.dataset.num来获取标签data-num值, 然后在wxml中通过三元运算符的匹配便可完成class名的增改,

//wxml
<view class="list-wrapper">
      <view class="list-top">
         <view data-num="1" class="list-menu list-menu1 {{_num==1?'cur':''}}" bindtap="menuClick">头条</view>
         <view data-num="2" class="list-menu list-menu2 {{_num==2?'cur':''}}" bindtap="menuClick">活动</view>
         <view data-num="3" class="list-menu list-menu3 {{_num==3?'cur':''}}" bindtap="menuClick">公告</view>
      </view>
</view>

//js
menuClick:function(e){
      this.setData({
         _num:e.target.dataset.num
      })
  },

效果

我提前在curclass中添加了样式.
这里写图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

刘翾

关注关注

8
点赞
踩
23

收藏

觉得还不错? 一键收藏
5
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

小程序动态改变样式class

v_loading的博客

06-07

976

#问题 小程序中动态改变样式class #解决直接在{{}}里做判断，{{cindex==index? ‘sborder’:’’}} <view class="sitem {{cindex==index? 'sborder':''}}" wx:for="{{list}}" wx:key="index" data-index="{{index}}" bindtap="changeIndex"> {{item.name}} </view> ...

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

weixin_41733299的博客

02-23

5525

微信小程序切换导航栏，因为微信小程序不能与jQuery一样用dom属性，例如addclass，removeclass这样的方法，就相对来说麻烦一点，可是有时候需要做切换导航栏这样的操作，参考代码如下： wxml： <view class="header-sort-nav"> <view bindtap="tapHan" class='sort-li {{_index==1?"nav-checked":""}}' data-index="1">招生通告</view&gt

5 条评论您还未登录，请先登录后发表或查看评论

微信小程序class动态绑定

yangmin_kk的博客

04-30

2393

示例是除最后一条都加下划线并且除第一条给padding-top:10。(最外层要加上"[]"，不然不生效)示例是除最后一条都加下划线（微信小程序使用动态class前面不需要冒号）

微信小程序动态样式绑定

热门推荐

猿飞梦的博客

03-27

2万+

之前用jquery时我们可以使用： $(".classify").eq(0).addClass("addStyleMi").siblings().removeClass("addStyleMi"); 动态的为元素切换类名，添加css样式。但是微信小程序中不提供操作Dom的方法，但我们也可以实现为元素动态切换类名。效果图： ...

微信小程序框架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-...

动态代理调用invoke源码分析

chenping的博客

05-06

361

通过上面动态代理的使用，它看似并没有代理类，那么它是什么进入DynamicProxy的invoke方法实现实际委托对象方法的调用呢？下面我们通过源码一步一步解析揭开它什么的面纱：动态代理使用了Proxy.newProxyInstance方法动态创建代理类，我们看下newProxyInstance源码： /** @params loader 用于从动态生成的class字节流中加载创建代理类 @p...

微信小程序动态添加class样式

03-29

尺寸单位： rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。所以用rpx可解决适配问题样式导入： /** app.wxss **/ @import "common.wxss"; 内联样式：框架组件上支持使用 style、class 属性来控制组件的样式。 style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式

微信小程序：动态控制class属性

会编程的林俊杰的博客

11-16

1万+

一、需求：点击一个选项，让其出现不同于其他选项的样式，比如选项文字的颜色变红。二、初步解决方案：可以设置一个活跃选项的数据来记录选中选项的下标（默认为0），其次选中其他选项时可以通过点击事件获取到所选选项的下标，并赋值给活跃选项。要点击的选项是 wx:for 循环出来的，所以接下来就是通过一个三元运算来判断每个循环的元素是否被选中，选中则加特殊样式。 js： cateActive:'0',//活跃选项下标 clickCate(e){ console.lo...

小程序 动态绑定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...

微信小程序中如何动态添加 class 属性

wbskb的博客

08-20

6902

如何在微信小程序动态添加 class 属性，如何在微信小程序组件中动态添加 class 属性

小程序动态添加class样式

我是一枚程序员

06-19

1万+

上图片，看一下想做的样式点选哪个button，哪个button添加border，就是这样一个效果，上代码 js goods: [{ label: '导游好', checked: false }, { label: '性价比高', checked: false }, { label: '没有多余购物', ch...

微信小程序点击添加class类名，再点击移除（取消）class（即切换class类名）

coderYYY的博客

10-09

3769

小程序点击按钮添加class类名（选中单个按钮），再点击原先选中的，移除类名（取消选中）

uniapp_微信小程序_说下动态class（实用性很强）

apple_70049717的博客

03-02

833

/ 以上图片为例,里面的参数是后端传给你的，你不知道有多少东西，更不可能一个一个改，所以引入动态class。

微信小程序动态绑定class样式类

海贼王某人的博客

03-23

6618

话不多说，直接上代码，循环列表，根据选中状态显示不同的样式，active就是你在wxss文件里面创建的类名 <view class="{{item.select ? 'active':''}}" wx:for="{{itemList}}" wx:key="{{item.id}}"> {{item.name}} </view> ......

微信小程序开发 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类名。希望以上信息对你有所帮助！如果你还有其他问题，请继续提问。