简述

由于微信小程序开发不同于以往的普通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="" class="list-menu list-menu1 {{_num==1?'cur':''}}" bindtap="menuClick">头条</view>
<view data-num="" class="list-menu list-menu2 {{_num==2?'cur':''}}" bindtap="menuClick">活动</view>
<view data-num="" 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中添加了样式. 

微信小程序如何动态增删class类名的更多相关文章

  1. 微信小程序如何动态增删class类名达到切换tabel栏的效果

    微信小程序和vue还是有点差别的,要想实现通过动态切换class来达到切换css的效果,请看代码: //wxml页面: <view class="tab"> <v ...

  2. 微信小程序之动态获取元素宽高

    我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...

  3. 微信小程序 JS动态修改样式

    微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...

  4. 关于微信小程序的动态跳转

    最近在研究微信小程序.在做一个简单的购物小程序时,遇到一个问题:如何通过扫码实现动态的跳转页面功能, 通过研究终于找到了解决方法: 首先当然要实现扫码解析功能js的代码: click: functio ...

  5. 【微信小程序】动态设置图片大小

    我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性:1.src              图片资源地址2.mode          图片裁剪.缩放的模式3.binderror   ...

  6. 微信小程序 - tabbar动态更换图标以及文字

    大家不喜欢小程序的tabbar原因之一就是它太死板,tabbar一旦在app.json定义以后文字不能改,图标不能改! 我要自制tabbar!!! 其实在微信更新完1.9.0基础调试以后就推出了更新方 ...

  7. 微信小程序,动态改变样式

    小程序目前没有修改样式api,但是可以利用数据绑定实现动态改变样式,可以用view标签模拟page然后改变view标签的样式,以下案例演示了如果改变page背景颜色: <view class=& ...

  8. 微信小程序 setData动态修改数据数组的值

    1.问题说明 有一组数据,用来存储图片路径,动态修改图片的路径来上传图片,而小程序JS只能通过事件获取时机和setData方法修改数据来改变view. 而用这样写的方式明显是错误的 2.解决办法 字符 ...

  9. 微信小程序之动态添加、删除指定内容(view)和获取input值

    这次遇到个问题: 1. 动态的添加指定的view内容..嗯..很简单..wx:for就搞定 2. 动态添加的内容中有input,最终获取值的时候,要获取到所有input的值并且是一个数组..嗯.. 3 ...

随机推荐

  1. 常见递归问题 java

    //最长公共子序列 import java.util.*;public class Main { public static void main(String[] args){ int ans = m ...

  2. C# Redis实战(五)

    五.删除数据 在C# Redis实战(四)中讲述了如何在Redis中写入key-value型数据,本篇将讲述如何删除Redis中数据. 1.void Delete(T entity);删除函数的运用 ...

  3. GeoJSON JS判断某一点是否在某一区域范围之内

    GeoJSON JS判断某一点是否在某一区域范围之内 算法: function isInPolygon(checkPoint, polygonPoints) { var counter = 0; va ...

  4. RedissonLock分布式锁源码分析

    最近碰到的一个问题,Java代码中写了一个定时器,分布式部署的时候,多台同时执行的话就会出现重复的数据,为了避免这种情况,之前是通过在配置文件里写上可以执行这段代码的IP,代码中判断如果跟这个IP相等 ...

  5. 设计模式——原型模式(C++实现)

    #include <iostream> #include <string> using namespace std; class CPrototype { public: CP ...

  6. 配置puppet的主机端和客户端的自动认证

    配置puppet的主机端和客户端的自动认证 author:headsen  chen    2017-11-01  17:44:56 个人原创,转载请注明作者,出处,否则依法追究法律责任 1,先在主机 ...

  7. fail2ban防止SSH暴力破解

    [root@kazihuo /srv]# wget https://github.com/fail2ban/fail2ban/archive/0.8.14.tar.gz [root@kazihuo / ...

  8. JSP中动态include和静态include区别

    静态include(<%@ include file=""%>): 静态include(静态导入)是指将一个其他文件(一个jsp/html)嵌入到本页面 jsp的inc ...

  9. shell基本命令学习

    Shell是一种脚步语言,那么,就必须有解释器来执行这些脚步. Unix/Linux上常见的shell脚步解释器有bash,sh,csh,ksh等,习惯把它们称为shell. 例如: #!/bin/b ...

  10. spring-boot 多模块化项目和EurekaServer的搭建

    Spring boot由于其 1.易于开发和维护.2.单个微服务启动快.3.局部修改部署容易.4.技术栈不受语言限制等优点受到越来越多公司的重视.spring-boot还集成了许多关于微服务开发的框架 ...