微信小程序 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 相关文章推荐
ext 列表页面关于多行查询的办法
Mar 25 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
js中键盘事件实例简析
Jan 10 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 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实现的数字验证码及数字运算验证码
2015/07/30 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
限制文本字节数js代码
2007/03/06 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
coffeescript使用的方式汇总
2015/08/05 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python海龟绘图实例教程
2014/07/24 Python
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
团日活动总结书
2014/05/08 职场文书
室内趣味活动方案
2014/08/24 职场文书
任命书怎么写
2015/03/02 职场文书
销售员自我评价
2015/03/11 职场文书
撤诉申请怎么写
2015/05/19 职场文书
关于教师节的广播稿
2015/08/19 职场文书