微信小程序和vue还是有点差别的,要想实现通过动态切换class来达到切换css的效果,请看代码:

 //wxml页面:
  <view class="tab">
<view wx:for="{{catList}}" wx:key="index" bindtap="tabs" class="{{num==index?'active':''}}" data-index="{{index}}">
{{item.name}}
</view>
 </view>
  //wxss页面(给你的active加样式,active可以随便取,wxml和wxss里保持一致就行):
.tab .active{background-color: rgb( 231, 23, 23 );color:#fff;}
  //js页面(num记得设置默认值 ,这样第一个view就带了你在wxss页面写的active的样式;): 
data:{ num:0, } tabs:function(e){
var index = e.currentTarget.dataset.index;
this.setData({
num:index
}) }

 

 如果帮到了你,请不要吝啬你的赞哦~

 

微信小程序如何动态增删class类名达到切换tabel栏的效果的更多相关文章

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

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

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

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

  3. 微信小程序从零开始开发步骤(三)底部导航栏

    上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...

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

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

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

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

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

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

  7. 微信小程序(13)--页面滚动到某个位置添加类效果

    微信小程序页面滚动到某个位置添加类,盒子置顶效果. <!-- vh,是指CSS中相对长度单位,表示相对视口高度(Viewport Height),1vh = % * 视口高度 --> &l ...

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

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

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

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

随机推荐

  1. MySQL 8.0 information_schema系统库的改进

    目录 information_schema有何用? mysql8.0 之前的查询方式 mysql8.0 开始的查询方式 测试5.7和8.0不同版本访问I_S库的性能 结论 information_sc ...

  2. centos 7 安装docker,conflicts 异常

    [root@localhost html]# yum install docker-io 已加载插件:fastestmirror, langpacks Loading mirror speeds fr ...

  3. Spring Cloud Alibaba | Nacos配置管理

    目录 Spring Cloud Alibaba | Nacos配置管理 1. pom.xml 项目依赖 2. 在 bootstrap.properties 中配置 Nacos server 的地址和应 ...

  4. 使用wincc C脚本查找窗口句柄的方法

    关于窗口句柄的用法,网上可以搜到很多相关的文章,本文以windows API接口函数为例,简单介绍一下基本使用,主要包括找到此窗体,在找到的窗体写入数据,对窗体进行关闭,最大化,最小化的操作: 1.利 ...

  5. 扒一扒那些教程中不常被提及的JavaScript小技巧

    1.过滤唯一值 Set类型是在ES6中新增的,它类似于数组,但是成员的值都是唯一的,没有重复的值.结合扩展运算符(...)我们可以创建一个新的数组,达到过滤原数组重复值的功能. const array ...

  6. Gin 框架 - 安装和路由配置

    目录 概述 Gin 安装 路由配置 推荐阅读 概述 看下 Gin 框架的官方介绍: Gin 是一个用 Go (Golang) 编写的 web 框架. 它是一个类似于 martini 但拥有更好性能的 ...

  7. infiniband 网卡驱动安装

    硬件:Mellanox InfiniBand,主要包括 HCA(主机通道适配器)和交换机两部分软件:CentOS 6.4MLNX_OFED_LINUX-2.1-1.0.0-rhel6.4-x86_64 ...

  8. 微信小程序生成随机数

    const charts = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K', ...

  9. 15号作品teamfinal使用体验

    通过使用这款软件,可以轻松的查阅所处学期的任意周中某一天中的基教.一教.二教.三教和土木楼中的空教室,方便了同学去寻找空教室的方便,方便同学们上自习,节省寻找教室的时间,提供了非常大的便利. 打开界面 ...

  10. delegate委托的例子,实现对Form中控件的更新

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...