uniapp在方法函数中修改样式

1. 什么是uniapp

UniApp（全称Universal Application），是一个使用Vue.js开发应用的前端框架，可以快速开发iOS、Android、H5、以及各种小程序等应用。UniApp所使用的代码和写法是Vue.js框架的语法，而其具有与传统Vue.js开发的同等能力，如数据双向绑定、指令、组件等，同时又融合了微信小程序开发风格以及其他移动应用开发的特性。

2. UniApp中如何修改样式

在UniApp中修改样式的方法除了传统的使用<style>标签之外，还可以在js文件的方法函数中设置样式，即使用uni.cssStyle()函数。

2.1 uni.cssStyle()

uni.cssStyle()是UniApp提供的一个全局函数，用于在js代码中设置样式。其定义如下：

uni.cssStyle(selector, styles)

selector: CSS选择器，表示要修改哪些元素的样式

styles: CSS样式，表示要修改的样式属性及其值，多个属性之间用分号隔开

下面是示例代码：

//设置id为test的元素的文本颜色为红色
uni.cssStyle('#test', 'color: red;');

以上代码会将id为test的元素的文本颜色设置为红色。需要注意的是，在使用uni.cssStyle()方法时，通常是在event事件中触发。

2.2 示例

下面是一个完整的示例，展示如何在UniApp中修改元素的样式：

<template>
  <view class="container">
    <view class="hello uni-padding-wrap">
      <view class="uni-text" id="test" @click="changeTextColor">Hello uni-app</view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    changeTextColor() {
      uni.cssStyle('#test', 'color: red;');
    }
  }
}
</script>
<style lang="scss">
/* 无需设置#test的样式 */
.hello {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
  text-align: center;
}
</style>

以上示例代码中，首先在模板中定义了一个id为test的元素，接着在js文件中定义了一个名为changeTextColor的方法函数，该函数在点击test元素时被触发，在方法函数中使用uni.cssStyle()方法将test元素的文本颜色设置为红色。

代码中还使用了一些UniApp的特有写法，如在样式中使用lang="scss"指定使用SCSS语法，夫元素的类名加上"uni-padding-wrap"可以添加一些常用的padding、margin、position样式，方便开发。

3. 总结

本文介绍了UniApp中如何在方法函数中修改元素样式的方法，引入了uni.cssStyle()函数，并给出了相应的代码示例。在实际开发中，使用这种方法可以减少一些样式相关的代码，在某些场景下也会更加方便。