uni-app 頁面樣式

1. 前言

在日常項(xiàng)目開發(fā)過程中，頁面邏輯代碼通常要搭配頁面樣式才能將頁面需求完全實(shí)現(xiàn)出來。

很多項(xiàng)目 bug 需要花費(fèi)較長(zhǎng)的時(shí)間來解決，很大原因是因?yàn)槌鯇W(xué)者對(duì)頁面樣式了解的不夠透徹引起的。這樣當(dāng)項(xiàng)目出現(xiàn)樣式問題的時(shí)候就會(huì)比較茫然，大大增加了項(xiàng)目調(diào)試的時(shí)間。開發(fā)項(xiàng)目之前，先了解一下頁面樣式的基礎(chǔ)知識(shí)，后面進(jìn)行項(xiàng)目開發(fā)就會(huì)順利很多。

這小節(jié)我們來講解 uni-app 項(xiàng)目的頁面樣式的基礎(chǔ)知識(shí)，包括全局樣式和局部樣式，選擇器的應(yīng)用以及內(nèi)聯(lián)樣式的應(yīng)用。下面我們來一一講解。

2. 全局樣式與局部樣式

全局樣式會(huì)作用在所有頁面上面。有了全局樣式，我們就不必在每個(gè)頁面上寫重復(fù)的樣式代碼了，在提高我們工作效率的同時(shí)，也方便我們后期對(duì)項(xiàng)目的優(yōu)化和維護(hù)。開發(fā) uni-app 項(xiàng)目時(shí)，我們會(huì)將全局樣式定義在 App.vue 文件中。
局部樣式會(huì)作用在特定的頁面上面，當(dāng)全局樣式與局部樣式?jīng)_突時(shí)，局部樣式會(huì)覆蓋掉全局樣式。我們通常將局部樣式定義在 pages 目錄下的 .vue 文件中。

2.1. 全局樣式與局部樣式?jīng)_突

下面來舉個(gè)實(shí)際例子看看當(dāng)全局樣式與局部樣式?jīng)_突時(shí)，頁面是如何顯示的。

編輯 App.vue 文件，添加全局樣式，將頁面背景顏色定義為綠色，按鈕寬度設(shè)置為50%，全局樣式將影響到所有頁面。
實(shí)例：

page {
	background-color: green;
}
button {
	width:50%;
	margin-top: 20px;
}

這里定義的 page 標(biāo)簽， 相當(dāng)于普通項(xiàng)目中的 body 標(biāo)簽，會(huì)影響到所有的頁面樣式，通常我們會(huì)在這里面設(shè)置頁面的背景顏色、字體樣式、大小等。

接下來編輯 pages/index/index.vue 文件，添加局部樣式，將頁面背景顏色定義為紅色，局部樣式將影響到 index 頁面。

我們實(shí)例中定義的局部樣式與全局樣式?jīng)_突的地方主要是 background-color 背景顏色屬性，全局樣式中定義的是 green 綠色，局部樣式中定義的是 red 紅色。
實(shí)例：

page {
    background-color: red;
}
button {
    height:100px;
}

點(diǎn)擊工具欄–運(yùn)行–運(yùn)行到內(nèi)置瀏覽器，查看效果。
局部樣式紅色背景覆蓋了全局樣式綠色背景。
按鈕沒有沖突的樣式，既顯示了全局樣式中定義的寬度，又顯示了局部樣式中定義的高度。

3. 選擇器是應(yīng)用

選擇器就是 html 標(biāo)簽的某個(gè)特有屬性，如 id class 等，在css中可以根據(jù)這些特有屬性來統(tǒng)一定義樣式。

目前 uni-app 規(guī)定支持的選擇器有 .class、#id、element、element, element、::after、::before 這6個(gè)，我們來實(shí)例演示一下：
先在 template 標(biāo)簽中定義幾個(gè)布局。
實(shí)例：

<button class="list1" id="column">list1</button>
<button class="list1">list2</button>
<button class="list2">list3</button>
<view class="list2">list4</button>

3.1 .class 選擇器

使用 .class 定義樣式，比如 .list1，就表示定義的是所有 class 為 list1 標(biāo)簽的樣式。
實(shí)例：

<style>
    .list1 {
         width: 50%;
    }	
</style>

3.2 #id 選擇器

使用 #id 定義樣式，比如 #column，就表示定義的是 id 為 column 標(biāo)簽的樣式。
實(shí)例：

<style>
    #column {
         width: 50%;
    }	
</style>

3.3 element 選擇器

根據(jù)標(biāo)簽來定義樣式，下面來定義所有 button 標(biāo)簽的樣式
實(shí)例：

<style>
    button {
         width: 50%;
    }	
</style>

3.4 element, element 選擇器

可以同時(shí)定義多個(gè)標(biāo)簽，標(biāo)簽之間用逗號(hào)隔開。
實(shí)例：

<style>
    button,view {
         width: 50%;
    }	
</style>

3.5 ::after 和 ::before 選擇器

::before 和 ::after 的主要作用是在標(biāo)簽內(nèi)容前后加上指定內(nèi)容
實(shí)例：

<style>
    button::before{
	   content: 'Hello';
    }
	button::after{
	    content: 'Imooc';
	}
</style>

4. 內(nèi)聯(lián)樣式

內(nèi)聯(lián)樣式指的是把 css 代碼直接寫在 HTML 標(biāo)簽中，可以使頁面隨著標(biāo)簽情況的不同顯示不同的樣式。我們可以使用 style、class 屬性來控制 HTML 標(biāo)簽的樣式。
實(shí)例：

<view class="list" style="text-align:center;">內(nèi)聯(lián)樣式</view>

在我們開發(fā)過程中，可能同樣一個(gè)標(biāo)簽在不同情況下顯示不同的顏色，比如股市漲跌幅，在漲的時(shí)候顯示紅色，在跌的時(shí)候顯示綠色。像這種需求，就可以用到動(dòng)態(tài)樣式。

動(dòng)態(tài)樣式建議寫進(jìn) style 屬性中，靜態(tài)樣式建議寫進(jìn) class 屬性中，這樣可以提高渲染效果，盡可能的優(yōu)化頁面性能。

下面來實(shí)現(xiàn)一下股市漲跌動(dòng)態(tài)樣式的需求。
實(shí)例：

<template>
  <view :style="{color:color}">漲跌幅：{{data}}%</view>
</template>

<script>
  export default {
    data() {
      return {
        color:"",
        data:1
      };
    },
    onLoad() {
      //當(dāng) data < 0 顯示綠色，否則顯示紅色
      if(this.data < 0){
		this.color = "green"
	  }else{
		this.color = "red"
	  }
    }
  }
</script>

5. 小結(jié)

本節(jié)課程我們主要學(xué)習(xí)了uni-app 的頁面樣式的幾大應(yīng)用，本節(jié)課程的需要掌握的重點(diǎn)如下：

• 掌握全局樣式和局部樣式，在 App.vue 文件中定義的樣式就是全局樣式，在 pages 目錄下 的 vue 文件中定義的樣式就是局部樣式；
• 掌握6個(gè)選擇器的實(shí)際應(yīng)用；
• 掌握內(nèi)聯(lián)樣式的應(yīng)用，靜態(tài)樣式以及動(dòng)態(tài)樣式要了解怎樣使用。