首页 > 微信小程序 > 微信开发 > 微信开发之JS动态修改样式

微信开发之JS动态修改样式

零下一度
发布: 2017-05-26 10:36:25
原创
2018 人浏览过

这篇文章主要介绍了微信小程序 JS动态修改样式的实现代码,原理是绑定数据,然后动态的修改数据,从而实现动态样式的改变而已,需要的朋友可以参考下

微信小程序这个坑啊,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"
 })
 }
})
登录后复制

效果

【相关推荐】

1. 微信开发之如何调用全局JS?

2. 微信开发之引用其他js文件实例详解

3. 微信开发之生命周期函数的实例教程

以上是微信开发之JS动态修改样式的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板