随着移动应用市场的不断发展和用户对移动应用的需求不断增加，开发者对于移动应用的开发也逐渐走上了一个多端共用的道路，移动应用也需要在不同的场景下提供不同的视觉效果与交互体验，而 uniapp 就能够满足这种需求，通过编写一份代码即可实现在不同端、不同分辨率下的视觉效果的差异化输出。
Uniapp 是一个基于 Vue.js 开发的前端框架，它可以实现一份代码构建出多个平台的应用，包括微信小程序、H5、支付宝小程序、APP 等。本文将着重介绍如何设置 Uniapp 动态不同的样式。
动态设置样式
在 Uniapp 中，如果要动态设置某个组件的样式，可以使用 :style 属性来实现。例如，在 vue 文件中定义一个 view 组件，然后通过 :style 属性来设置其样式：
<template>
<view></view></template><script>
export default {
data () {
return {
dynamicStyle: {
backgroundColor: '#f0f0f0'
}
}
}
}
</script>
上面代码中，我们定义了一个 view 组件，并通过 data 属性设置了一个 dynamicStyle 变量，其中我们将 backgroundColor 设置为了灰色。然后，我们在 view 组件中使用 :style 属性来动态设置样式。
这里我们只设置了一个简单的样式属性，其实我们还可以设置更多属性，包括 font-size、width、height、margin、padding 等等。
但是，采用上述方式来设置样式，只能够实现全局的样式设置，如果某个场景要求设置不同的样式，就需要动态的来更改样式。
动态设置不同的样式
上文讲到了如何动态设置样式，下面将介绍如何动态设置不同样式。
Uniapp 支持通过 JavaScript 对样式进行操作，这为我们实现不同样式的动态设置提供了可能。
例如，对于 view 组件，我们可以通过 JavaScript 来更改其中的属性，从而达到修改组件样式的目的：
this.$refs.target.style.backgroundColor = '#F00'
上述代码中，我们首先获取到 view 组件的 ref，然后通过 style 动态的更改组件的背景颜色。
那么，如何在 Uniapp 中实现按照不同的场景来进行不同的样式设置呢？
通过判断条件来更改样式
第一种实现方式是通过判断条件来动态更改样式，例如，我们可以通过判断设备类型，从而控制不同样式的设置。
这里以判断设备是否是 iOS 设备作为例子：
<template>
<view></view></template><script>
export default {
data () {
return {
dynamicStyle: {}
}
},
onLoad () {
// 判断是否是 iOS 设备
const isIOS = uni.getSystemInfoSync().platform === 'ios'
if (isIOS) {
this.dynamicStyle.backgroundColor = '#ff0'
} else {
this.dynamicStyle.backgroundColor = '#f00'
}
}
}
</script>
上述代码中，我们首先定义一个空对象 dynamicStyle，然后在 onLoad 生命周期钩子函数中判断设备类型，如果是 iOS 设备，则将背景颜色设置为黄色，否则设置为红色。
通过这种方式，我们可以根据不同的条件来动态的更改样式，从而实现不同样式的差异化。
通过样式表方式来更改样式
第二种实现方式是通过动态的引入样式表来控制不同样式的设置。
首先，我们需要在 style 标签中写好样式表，例如我们定义了一个名为 red-bg 的样式表：
<style>
.red-bg {
background-color: #f00;
}
</style>
然后，在我们需要的时候就可以通过 this.$refs 对象动态的引入样式表，例如，我们需要在某个条件成立的时候为页面中的某个组件添加 red-bg 样式，则可以这样写代码：
this.$refs.target.classList.add('red-bg')
上述代码中，我们获取到页面中名为 target 的组件，并通过 classList 对象的 add 方法来添加 red-bg 样式表。
通过这种方式，我们可以在不同情况下引入不同的样式表，从而实现不同样式的设置。
总结
本文主要介绍了在 Uniapp 中如何设置动态不同的样式，通过判断条件或者动态的引入样式表来控制不同样式的设置。
在实际开发中，我们需要根据具体的业务场景和需求来选择不同的实现方式，从而构建出符合用户需求的移动应用。
