0
点赞
收藏
分享

微信扫一扫

weex-修改style的几种方法


对于不熟悉weex和js的人来说,初学weex不知道怎么来修改style,即使网上查了,也很难查找到需要的信息,好不容易查到了还是js里面的东西,还不确定weex是否支持,这里,博主经过才坑,总结了两种方法来修改style,效果见下图:

weex-修改style的几种方法_修改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有提供这个方法,直接过去看即可,针对改动比较大的样式变动。


举报

相关推荐

0 条评论