微信小程序和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. WINDOWS 安装ZeroMQ

    zmq看起来很好用,但是安装起来不是一般麻烦.原来以为java绑定会提供jar包直接可使用,但是官网没有提供已经编译好的库文件和jar.多么的不方便啊!最终还是要自己动手编译! 安装java版本的zm ...

  2. dapper支持DataSet

    在源代码中添加 /// <summary> /// describe:支持 DataSet /// </summary> /// <param name="cn ...

  3. C#拼装JSON数组简易方法

    下面是我们想要拼接出来的JSON字符串,返回给前台 {"success":"true","msg":"","d ...

  4. linux 安装命令 nginx 部署

    [TOC] # 安装anocanda wget https://repo.anaconda.com/archive/Anaconda3-2019.03-Linux-x86_64.sh安装:bash A ...

  5. 「PowerBI相关」一款极其优秀的DAX建模工具Tabular Editor

    做Excel插件开发的时间久了,大部分人的印象是笔者是做软件开发,谈不上软件,也是插件开发级别. 但笔者更希望大家记住的身份是做BI开发,特别是企业级的BI. 故也借着Excel催化剂这个平台,输送一 ...

  6. 小白开学Asp.Net Core《二》

    小白开学Asp.Net Core<二> ——数据仓储层(Repositroy) 一.历史现象 在后端开发中,数据库操作是最频繁的,每一个开发人员都会接触,甚至不少开发人员每天的工作就是与数 ...

  7. 2019杭电多校第一场hdu6581 Vacation

    Vacation 题目传送门 update(O(n)) 看了那个O(n)的方法,感觉自己想的那个O(nlogn)的好傻,awsl. 0车最终通过停车线的时候,状态一定是某个车堵住后面的所有车(这个车也 ...

  8. phpStudy集成环境apche+openssl配置本地https

    OpenSSl windows环境搭建 网上各种文章都说需要下载多个工具,实际上只要一个程序就好,下载地址http://slproweb.com/products/Win32OpenSSL.html ...

  9. spring aop(四)

    直接找到解析aop标签的方法: protected void parseBeanDefinitions(Element root, BeanDefinitionParserDelegate deleg ...

  10. yum源使用报错

    CentOS系统yum源使用报错:Error: Cannot retrieve repository metadata (repomd.xml) for repository: rpmforge. 服 ...