微信小程序 JS动态修改样式的实现代码


Posted in Javascript onFebruary 10, 2017

微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定。或者用removeClass addClass 来修改样式。

以下是一种动态修改样式的方法,原理是绑定数据,然后动态的修改数据,从而实现动态样式的改变而已。感觉有点········那个啥的,怪怪的。不过也没办法了。如果你有更好的方法,可以在评论区分享一下。

test.wxml

<view style="text-align: center;">
 <label style="color:{{color}};">我会变色</label>
 <button bindtap="clickRed">变红</button>
 <button bindtap="clickgreen">变绿</button>
</view>

test.js

Page({
 data: {
 color: "red"
 },
 clickRed: function () {
 this.setData({
  color: "red"
 })
 },
 clickgreen: function () {
 this.setData({
  color: "green"
 })
 }
})

效果

微信小程序 JS动态修改样式的实现代码

以上所述是小编给大家介绍的微信小程序 JS动态修改样式的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript 各浏览器的 Javascript 效率对比
Jan 23 Javascript
jQuery 核心函数以及jQuery对象
Mar 23 Javascript
用方法封装javascript的new操作符(一)
Dec 25 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
构造函数+原型模式构造js自定义对象(最通用)
May 12 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 #Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 #Javascript
基于jQuery实现弹幕APP
Feb 10 #Javascript
BOM之navigator对象和用户代理检测
Feb 10 #Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 #Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 #Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 #Javascript
You might like
简单谈谈PHP中strlen 函数
2016/02/27 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
详解参数传递四种形式
2015/07/21 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
python3.0 字典key排序
2008/12/24 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
物业招聘计划书
2014/01/10 职场文书
四年大学自我鉴定
2014/02/17 职场文书
环保建议书100字
2014/05/14 职场文书
小学生环保倡议书
2014/05/15 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
Python实现Hash算法
2022/03/18 Python
分享几个实用的CSS代码块
2022/06/10 HTML / CSS