微信小程序怎么动态的添加css,微信小程序点击view动态添加样式过程解析-程序员宅基地

技术标签: 微信小程序怎么动态的添加css  

这篇文章主要介绍了微信小程序点击view动态添加样式过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

基本逻辑:

1.给每个view自定义dataIndex属性,从0开始

2.自定义一个名为selected的class,作为被选中后的样式

3.在wx.js中给viewId属性赋为0,用于默认显示。

4.给每个view添加一个点击事件select,在点击某个view时 将dataIndex变成这个view的自定义index

5.在view中添加一个三木运算符用于控制选中样式 { {dataIndex == 0 ? 'selected':''}}

附图:

wxml

好评

中评

差评

wxss

/* 表情盒子 */

.ICONBOX{

border: 1px solid red;

display: flex;

justify-content: space-around;

/* flex-direction: */

align-items: center;

color: #999;

font-size: 28rpx;

}

.ic{

margin-right: 5rpx;

}

.selected{

color: #f63

}

wxjs

data: {

viewId : 0

},

select:function(e){

this.setData({

viewId: e.currentTarget.dataset.index

})

},

由于viewId初始值是0,所以会默认第一个切换了样式。

这样就完成了该事件:

271a1e2758e12f6cdb5ab7710ecfbc4e.png

里面还有几个不足之处,时间仓促,暂且就这样写了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30918493/article/details/119401193

智能推荐

linux系统下 usb网卡的驱动安装_0bda:a192-程序员宅基地

文章浏览阅读1.3w次,点赞12次,收藏61次。本文分享一种思路去解决linux下不能直接识别usb网卡的方案尤其针对没有内核-头文件的内核系统首先确认系统版本:uname -a_0bda:a192

编译器研究之路_未来50年_编译器 研究前沿-程序员宅基地

文章浏览阅读5.8k次,点赞3次,收藏9次。编译器研究之路_未来50年今天,复杂而泛在的软件架构支撑着全球经济,编译器和高级语言正是这些软件的基石。强大而优雅的编译技术在硬件综合等领域同样有着“连城”的价值。毫不夸张地说,与半导体技术一样,编译器和高级语言处于信息时代的核心地位。 本文将展示编译技术过去的辉煌与成就,当前的研究现状,未来的发展方向。我们还将提出四项建议,均来自美国科学基金资助的“编译器研究和教育的_编译器 研究前沿

LDA相关论文汇总_多视角lda算法出自那篇文章-程序员宅基地

文章浏览阅读917次。fromhttp://blog.csdn.net/pirage/article/details/9467547LDA理论David M. Blei, Andrew Y. Ng, and Michael I. Jordan. Latent dirichlet allocation. J. Mach. Learn. Res.,3:993–1022, Ma_多视角lda算法出自那篇文章

微信小程序如何使用Git实现版本管理_小程序 git-程序员宅基地

文章浏览阅读3.5w次,点赞34次,收藏92次。在微信小程序开发的过程中,代码版本管理往往需要使用第三方工具进行管理。虽然微信Web开发工具提供了对Git文件版本状态的提示,但实际的使用体验依然不尽人意。随着微信Web开发工具的更新,最新的内测版本已经支持Git的直接管理,本文将就在微信Web开发工具中使用Git做版本管理做详细介绍。环境准备开发环境:Mac/Windows/Linux均可开发工具:微信Web开发者工具Beta版..._小程序 git

android自定义相机预览尺寸,相机在Android中,如何获得最佳尺寸,预览尺寸,图片尺寸,视图尺寸,图像扭曲...-程序员宅基地

文章浏览阅读200次。混合来自OpenGL和Android相机的视图时图像失真,以便在使用takepicture方法时获取两者的图像.我查了一下,发现相机图片设置为640X480,openGL视图和相机预览都设置为1280×720.所以我将相机图片大小设置为1280×720,结果非常完美.但是我无法在代码中设置大小,因为每个Android设备都会有所不同,并且每个设备都必须从支持的大小列表中选择预览大小和图片大小的设置..._相机预览尺寸改变,怎么重新获取

随便推点

讯景rx560D战狼版896流处理器,镁光显存开核失败抢救方法_rx560 bios-程序员宅基地

文章浏览阅读2.2k次,点赞4次,收藏3次。本方法适用于讯景rx560D战狼版开核失败,出现画面撕裂,黑屏,驱动打不上等问题的急救。_rx560 bios

HTML5,图片边框,.9效果处理_h5 .9图处理-程序员宅基地

文章浏览阅读6.2k次。图片边框背景,九宫格效果裁剪。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>边框图片的本质是背景,并不会影响元素内容的放置,类似九宫格效果,9个位置 一一对应</title> <style type="te_h5 .9图处理

预测模型结果校准——Bining_什么是数字bining-程序员宅基地

文章浏览阅读6.8k次。预测模型结果校准——Bining文献[2]中,将训练集中样本按估计值降序排序,均分成k等分;对于落在某个bin里的新样本,属于某个class的概率等于这个bin中这个class的实例所占的比例。[1] 文献[3]中,(1) 将logistic regression模型的输出结果划分成n个等长的bin,使得,定义了第i个bin的区间范围。对于第i个bin的校准值通过下式获得:即计..._什么是数字bining

CSS详解_css格式-程序员宅基地

文章浏览阅读1.4k次。CSS_css格式

powerdesigner 同步mysql 报错_PowerDesigner导出SQL时自动生成注释-程序员宅基地

文章浏览阅读178次。在powerBuilder中新建一个Physical Data Model,在其中新建一个用户表,信息如下图所示: 此时的SQL语句可从其中的Preview视图中得到,如下图所示: 这个时候生成的sql语句是没有注释的,而且sql语句可能也不是适合自己所对应的数据库语言。此时可以通过以下方法来生成注释并且选择所需的数据库语言。1、为sql生成注释,操作如下,我用的是PowerDesigner12...._powerdesigner mysql comment报错

Android模拟器访问本地tomcat服务器下的web应用(webservice),localhost换成10.0.2.2_tomcat修改localhost为10.0.2.2-程序员宅基地

文章浏览阅读2.6k次。安装tomcat后,在浏览器中输入http://localhost:9090/(默认端口为8080,可根据自己情况更改)就能出现如下页面:该页面来自/home/apache-tomcat-7.0.40/webapps/ROOT/index.jsp在一般的JavaWeb程序开发中,我们通常使用localhost或者127.0.0.1来访问本机的Web服务,但是如果_tomcat修改localhost为10.0.2.2

推荐文章

热门文章

相关标签