微信小程序如何动态增删class类名达到切换tabel栏的效果
微信小程序和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栏的效果的更多相关文章
- 微信小程序如何动态增删class类名
简述 由于微信小程序开发不同于以往的普通web开发, 因此无法通过js获取wxml文件的dom结构, 因此从js上直接添加一个类名应该不可能了. 可是我们可以通过微信小程序数据绑定以及view标签的& ...
- 微信小程序之动态获取元素宽高
我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...
- 微信小程序从零开始开发步骤(三)底部导航栏
上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...
- 微信小程序 JS动态修改样式
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
- 关于微信小程序的动态跳转
最近在研究微信小程序.在做一个简单的购物小程序时,遇到一个问题:如何通过扫码实现动态的跳转页面功能, 通过研究终于找到了解决方法: 首先当然要实现扫码解析功能js的代码: click: functio ...
- 【微信小程序】动态设置图片大小
我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性:1.src 图片资源地址2.mode 图片裁剪.缩放的模式3.binderror ...
- 微信小程序(13)--页面滚动到某个位置添加类效果
微信小程序页面滚动到某个位置添加类,盒子置顶效果. <!-- vh,是指CSS中相对长度单位,表示相对视口高度(Viewport Height),1vh = % * 视口高度 --> &l ...
- 微信小程序 - tabbar动态更换图标以及文字
大家不喜欢小程序的tabbar原因之一就是它太死板,tabbar一旦在app.json定义以后文字不能改,图标不能改! 我要自制tabbar!!! 其实在微信更新完1.9.0基础调试以后就推出了更新方 ...
- 微信小程序,动态改变样式
小程序目前没有修改样式api,但是可以利用数据绑定实现动态改变样式,可以用view标签模拟page然后改变view标签的样式,以下案例演示了如果改变page背景颜色: <view class=& ...
随机推荐
- WINDOWS 安装ZeroMQ
zmq看起来很好用,但是安装起来不是一般麻烦.原来以为java绑定会提供jar包直接可使用,但是官网没有提供已经编译好的库文件和jar.多么的不方便啊!最终还是要自己动手编译! 安装java版本的zm ...
- dapper支持DataSet
在源代码中添加 /// <summary> /// describe:支持 DataSet /// </summary> /// <param name="cn ...
- C#拼装JSON数组简易方法
下面是我们想要拼接出来的JSON字符串,返回给前台 {"success":"true","msg":"","d ...
- linux 安装命令 nginx 部署
[TOC] # 安装anocanda wget https://repo.anaconda.com/archive/Anaconda3-2019.03-Linux-x86_64.sh安装:bash A ...
- 「PowerBI相关」一款极其优秀的DAX建模工具Tabular Editor
做Excel插件开发的时间久了,大部分人的印象是笔者是做软件开发,谈不上软件,也是插件开发级别. 但笔者更希望大家记住的身份是做BI开发,特别是企业级的BI. 故也借着Excel催化剂这个平台,输送一 ...
- 小白开学Asp.Net Core《二》
小白开学Asp.Net Core<二> ——数据仓储层(Repositroy) 一.历史现象 在后端开发中,数据库操作是最频繁的,每一个开发人员都会接触,甚至不少开发人员每天的工作就是与数 ...
- 2019杭电多校第一场hdu6581 Vacation
Vacation 题目传送门 update(O(n)) 看了那个O(n)的方法,感觉自己想的那个O(nlogn)的好傻,awsl. 0车最终通过停车线的时候,状态一定是某个车堵住后面的所有车(这个车也 ...
- phpStudy集成环境apche+openssl配置本地https
OpenSSl windows环境搭建 网上各种文章都说需要下载多个工具,实际上只要一个程序就好,下载地址http://slproweb.com/products/Win32OpenSSL.html ...
- spring aop(四)
直接找到解析aop标签的方法: protected void parseBeanDefinitions(Element root, BeanDefinitionParserDelegate deleg ...
- yum源使用报错
CentOS系统yum源使用报错:Error: Cannot retrieve repository metadata (repomd.xml) for repository: rpmforge. 服 ...