weex-修改style的几种方法

简介: weex-修改style的几种方法

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

1.png

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

目录
相关文章
|
移动开发 前端开发 weex
weex-style-loader: 给你熟悉的style开发体验
> 使用`weex`开发了两个项目,感受到了其跨平台动态性的强大;另一最直接的感受就是,作为一名前端,不能像平常那样编写`css` ,要不定义`内联style`,要不定义`single-class selector`,绞尽脑汁去给每个标签起`className` 像这样 ```html .mod-app-entry { ... } .entry-item
6596 0
|
6月前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
386 2
|
6月前
|
移动开发 前端开发 weex
移动端混合开发技术:React Native、Weex、Flutter 之争
在移动应用开发领域,React Native、Weex 和 Flutter 是备受关注的混合开发技术。本文将对它们进行全面比较与评估,以帮助开发者做出明智的选择。我们将从开发生态、性能、跨平台能力和易用性等方面进行比较,为读者提供全面的参考和指导。
|
6月前
|
移动开发 Dart 前端开发
移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动应用的开发已经成为现代社会中的重要一环。本文将比较并评估三种主流的移动端混合开发技术:React Native、Weex和Flutter。通过对它们的特点、优势和劣势的分析,帮助开发者在选择适合自己项目的技术方案时做出明智的决策。
|
6月前
|
移动开发 开发框架 前端开发
移动端混合开发技术探析:React Native、Weex、Flutter的比较与选择
随着移动应用开发的高速发展,混合开发技术成为了一种备受关注的选择。本文将对移动端混合开发技术中的React Native、Weex和Flutter进行比较与探讨,分析它们在性能、开发体验、生态系统和跨平台支持等方面的差异,以及如何根据项目需求进行选择。
212 1
|
移动开发 JSON JavaScript
weex开发 - VS Code解除格式警告
weex开发 - VS Code解除格式警告
118 0
weex开发 - VS Code解除格式警告
|
移动开发 JavaScript weex
weex开发- 无法找到模块“weex-vue-render”的声明文件。引入vue报错,无法找到引入的vue模块
weex开发- 无法找到模块“weex-vue-render”的声明文件。引入vue报错,无法找到引入的vue模块
306 0
weex开发- 无法找到模块“weex-vue-render”的声明文件。引入vue报错,无法找到引入的vue模块
|
weex-ui 移动开发 JavaScript
weex开发-使用weex-ui绑定事件源注意事项
weex开发-使用weex-ui绑定事件源注意事项
146 0
|
移动开发 JavaScript weex
weex开发 - 方法的映射,在weex调用fetch方法,实际调用同名的原生方法,在回调中把数据传递回js
weex开发 - 方法的映射,在weex调用fetch方法,实际调用同名的原生方法,在回调中把数据传递回js
203 0
|
移动开发 编解码 weex
weex开发 - 加载index.js崩溃,白屏(may it has been destroyed so method:fireEvent is ignored,Url must be passe)
weex开发 - 加载index.js崩溃,白屏(may it has been destroyed so method:fireEvent is ignored,Url must be passe)
345 0