zl程序教程

您现在的位置是:首页 >  后端

当前栏目

weex-修改style的几种方法

方法 修改 几种 Style weex
2023-09-11 14:21:22 时间

对于不熟悉weex和js的人来说,初学weex不知道怎么来修改style,即使网上查了,也很难查找到需要的信息,好不容易查到了还是js里面的东西,还不确定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有提供这个方法,直接过去看即可,针对改动比较大的样式变动。