uni-app 頁面樣式

1. 前言

在日常項目開發過程中，頁面邏輯代碼通常要搭配頁面樣式才能將頁面需求完全實現出來。

很多項目 bug 需要花費較長的時間來解決，很大原因是因為初學者對頁面樣式了解的不夠透徹引起的。這樣當項目出現樣式問題的時候就會比較茫然，大大增加了項目調試的時間。開發項目之前，先了解一下頁面樣式的基礎知識，后面進行項目開發就會順利很多。

這小節我們來講解 uni-app 項目的頁面樣式的基礎知識，包括全局樣式和局部樣式，選擇器的應用以及內聯樣式的應用。下面我們來一一講解。

2. 全局樣式與局部樣式

全局樣式會作用在所有頁面上面。有了全局樣式，我們就不必在每個頁面上寫重復的樣式代碼了，在提高我們工作效率的同時，也方便我們后期對項目的優化和維護。開發 uni-app 項目時，我們會將全局樣式定義在 App.vue 文件中。
局部樣式會作用在特定的頁面上面，當全局樣式與局部樣式沖突時，局部樣式會覆蓋掉全局樣式。我們通常將局部樣式定義在 pages 目錄下的 .vue 文件中。

2.1. 全局樣式與局部樣式沖突

下面來舉個實際例子看看當全局樣式與局部樣式沖突時，頁面是如何顯示的。

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

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

這里定義的 page 標簽， 相當于普通項目中的 body 標簽，會影響到所有的頁面樣式，通常我們會在這里面設置頁面的背景顏色、字體樣式、大小等。

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

我們實例中定義的局部樣式與全局樣式沖突的地方主要是 background-color 背景顏色屬性，全局樣式中定義的是 green 綠色，局部樣式中定義的是 red 紅色。
實例：

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

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

3. 選擇器是應用

選擇器就是 html 標簽的某個特有屬性，如 id class 等，在css中可以根據這些特有屬性來統一定義樣式。

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

<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 標簽的樣式。
實例：

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

3.2 #id 選擇器

使用 #id 定義樣式，比如 #column，就表示定義的是 id 為 column 標簽的樣式。
實例：

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

3.3 element 選擇器

根據標簽來定義樣式，下面來定義所有 button 標簽的樣式
實例：

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

3.4 element, element 選擇器

可以同時定義多個標簽，標簽之間用逗號隔開。
實例：

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

3.5 ::after 和 ::before 選擇器

::before 和 ::after 的主要作用是在標簽內容前后加上指定內容
實例：

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

4. 內聯樣式

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

<view class="list" style="text-align:center;">內聯樣式</view>

在我們開發過程中，可能同樣一個標簽在不同情況下顯示不同的顏色，比如股市漲跌幅，在漲的時候顯示紅色，在跌的時候顯示綠色。像這種需求，就可以用到動態樣式。

動態樣式建議寫進 style 屬性中，靜態樣式建議寫進 class 屬性中，這樣可以提高渲染效果，盡可能的優化頁面性能。

下面來實現一下股市漲跌動態樣式的需求。
實例：

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

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

5. 小結

本節課程我們主要學習了uni-app 的頁面樣式的幾大應用，本節課程的需要掌握的重點如下：

• 掌握全局樣式和局部樣式，在 App.vue 文件中定義的樣式就是全局樣式，在 pages 目錄下 的 vue 文件中定義的樣式就是局部樣式；
• 掌握6個選擇器的實際應用；
• 掌握內聯樣式的應用，靜態樣式以及動態樣式要了解怎樣使用。