How to set dynamically different styles in uniapp

With the continuous development of the mobile application market and the increasing user demand for mobile applications, developers have gradually embarked on a multi-terminal sharing path for mobile application development. Mobile applications also need to provide different services in different scenarios. Visual effects and interactive experience, and Uniapp can meet this demand. By writing a code, you can achieve differentiated output of visual effects on different terminals and different resolutions.

Uniapp is a front-end framework developed based on Vue.js. It can implement one code to build applications for multiple platforms, including WeChat applet, H5, Alipay applet, APP, etc. This article will focus on how to set different styles for Uniapp dynamically.

Dynamic setting of styles

In Uniapp, if you want to dynamically set the style of a component, you can use the :style attribute to achieve this. For example, define a view component in the vue file, and then set its style through the :style attribute:

<template>
  <view :style="dynamicStyle"></view>
</template>

<script>
export default {
  data () {
    return {
      dynamicStyle: {
        backgroundColor: '#f0f0f0'
      }
    }
  }
}
</script>

In the above code, we defined a view component, and set a dynamicStyle variable through the data attribute, in which we set the backgroundColor to gray. Then, we use the :style attribute in the view component to dynamically set the style.

Here we only set a simple style attribute. In fact, we can also set more attributes, including font-size, width, height, margin, padding, etc.

However, using the above method to set styles can only achieve global style settings. If a certain scene requires setting different styles, the styles need to be changed dynamically.

Dynamic setting of different styles

The above mentioned how to dynamically set styles, the following will introduce how to dynamically set different styles.

Uniapp supports operating styles through JavaScript, which makes it possible for us to dynamically set different styles.

For example, for the view component, we can change its properties through JavaScript to modify the component style:

this.$refs.target.style.backgroundColor = '#F00'

In the above code, we first obtain Go to the ref of the view component, and then dynamically change the background color of the component through style.

So, how to implement different style settings according to different scenarios in Uniapp?

Changing styles by judging conditions

The first way to implement it is to dynamically change styles by judging conditions. For example, we can control the settings of different styles by judging the device type.

Here is an example of determining whether the device is an iOS device:

<template>
  <view :style="dynamicStyle"></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>

In the above code, we first define an empty object dynamicStyle, and then onLoad Determine the device type in the life cycle hook function. If it is an iOS device, set the background color to yellow, otherwise set it to red.

In this way, we can dynamically change the style according to different conditions, thereby achieving differentiation of different styles.

Changing styles through style sheets

The second implementation method is to dynamically introduce style sheets to control the settings of different styles.

First, we need to write the style sheet in the style tag. For example, we define a style sheet named red-bg:

<style>
.red-bg {
  background-color: #f00;
}
</style>

Then, when we need it, we can dynamically introduce the style sheet through the this.$refs object. For example, we need to add ## to a certain component in the page when a certain condition is true. #red-bg style, you can write the code like this:

this.$refs.target.classList.add('red-bg')

In the above code, we get the component named

target in the page and pass classList The add method of the object to add the red-bg style sheet.

In this way, we can introduce different style sheets in different situations to achieve different style settings.

Summary

This article mainly introduces how to set dynamically different styles in Uniapp, and control the setting of different styles by judging conditions or dynamically introducing style sheets.

In actual development, we need to choose different implementation methods according to specific business scenarios and needs, so as to build mobile applications that meet user needs.

The above is the detailed content of How to set dynamically different styles in uniapp. For more information, please follow other related articles on the PHP Chinese website!