对于不熟悉weex和js的人来说,初学weex不知道怎么来修改style,即使网上查了,也很难查找到需要的信息,好不容易查到了还是js里面的东西,还不确定weex是否支持,这里,博主经过才坑,总结了两种方法来修改style,效果见下图:
这里采用两种方法来修改style:
1.通过elementById的方法:
changeColor() { document.getElementById('haha').style.backgroundColor = 'blue' }//注:此方法只对web上运行的项目有用,客户端无效
2.通过refs获取到模块,通过animation操作改变style
animation.transition(this.$refs.haha,{ styles:{ width: '400px' }, duration: 0, timingFunction: 'ease', delay: 0 }, function(){ })
当然,改变style的方法绝不止这两种,博主在以后的学习中发现新的方法会对这篇博客进行更新。如果你有更好的方法也欢迎留言和博主一起讨论。
详细代码可以查看博主的Demo:点击下载
此处为更新
1.其实还有一种方法,但是个人不提倡,将样式写在标签内部,值给变量,在data中给变量赋值,如果样式设置比较少倒是可以,但要是多的话,标签会非常难看,代码不易读,但也权且算是一种方法:
<text class="content" ref="contentRef" :style="{ lines: limitLine }">{{desc}}</text> data中对limitLine赋值,this.limitLine=x来修改。
2.绑定class,此方法可查看:http://dotwe.org/vue/228cecf736e2cf08190d8c128cae6bc2
weex有提供这个方法,直接过去看即可,针对改动比较大的样式变动。