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.
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.
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?
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.
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')
target in the page and pass
classList The
add method of the object to add the
red-bg style sheet.
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!