樣式與布局 === [TOC] # 基本概念 ## 尺寸單位 uni-app?使用 upx 作為默認尺寸單位， upx 是相對于基準寬度的單位，可以根據屏幕寬度進行自適應。uni-app?規定屏幕基準寬度750upx。 開發者可以通過設計稿基準寬度計算頁面元素 upx 值，設計稿 1px 與框架樣式 1upx 轉換公式如下： ``` 設計稿 1px / 設計稿基準寬度 = 框架樣式 1upx / 750upx ``` 換言之，頁面元素寬度在uni-app中的寬度計算公式： ``` 750 * 元素在設計稿中的寬度 / 設計稿基準寬度 ``` 舉例說明： - 若設計稿寬度為 640px，元素 A 在設計稿上的寬度為 100px，那么元素 A 在uni-app里面的寬度應該設為：`750 * 100 / 640`，結果為：117upx。 - 若設計稿寬度為 375px，元素 B 在設計稿上的寬度為 200px，那么元素 B 在uni-app里面的寬度應該設為：`750 * 200 / 375`，結果為：400upx。 > 建議：?設計師可以用 iPhone6(375px) 作為視覺稿的標準。 > Tips：動態綁定的?style?不支持?upx ``` <!-- - 靜態upx賦值生效 --> <view class="test" style="width:200upx"></view> ``` ```· <!-- - 動態綁定不生效 --> <view class="test" :style="{width:winWidth + 'upx;'}"></view> ``` > uni.upx2px(upx)函數可以將upx單位轉換為px單位 ，在開發組件的時候一般都手動將upx轉換為px實現動態綁定 ``` <!-- - 動態綁定 --> <view class="test" :style="{width:winWidthWithPx + 'px;'}"></view> ``` ## 樣式導入 使用`@import`語句可以導入外聯樣式表，`@import`后跟需要導入的外聯樣式表的相對路徑，用;表示語句結束。示例代碼： ``` <style> @import "../../components/teaset/teaset.css"; … </style> ``` 如果當前頁面需要對標準庫中的樣式修改，可以使用重載的方式覆蓋之前的定義。 ``` <style> @import "../../components/teaset/teaset.css"; .ts-badge { padding: 10upx; } </style> ``` ## 選擇器 目前支持的選擇器有： - .class：.intro 選擇所有擁有 class="intro" 的組件 - `#id`：`#firstname` 選擇擁有 id="firstname" 的組件 - element：view 選擇所有 view 組件 - element, element view, checkbox：選擇所有文檔的 view 組件和所有的 checkbox組件 - ::after view::after：在 view 組件后邊插入內容，僅微信小程序和5+App生效 - ::before view::before：在 view 組件前邊插入內容，僅微信小程序和5+App生效 ## 全局樣式與局部樣式 定義在 App.vue 中的樣式為全局樣式，作用于每一個頁面。在 pages 目錄下 的 vue 文件中定義的樣式為局部樣式，只作用在對應的頁面，并會覆蓋 App.vue 中相同的選擇器。 - App.vue 中通過 `@import ` 語句可以導入外聯樣式，一樣作用于每一個頁面。一般我們將統一定義的標準組件庫再App.vue中通過`@import`語句導入，避免每個頁面都導入全局樣式。 ## class與style綁定 框架組件上支持使用 style、class 屬性來控制組件的樣式。 * style：靜態的樣式統一寫到 class 中。style 接收動態的樣式，在運行時會進行解析，請盡量避免將靜態的樣式寫進 style 中，以免影響渲染速度。 * class：用于指定樣式規則，其屬性值是樣式規則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上，樣式類名之間用空格分隔。 為節約性能，我們將?Class?與?Style?的表達式通過?compiler?硬編碼到?uni-app?中，支持語法和轉換效果如下： class 支持的語法: ``` <view :class="{ active: isActive }">111</view> <view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view> <view class="static" :class="[activeClass, errorClass]">333</view> <view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view> <view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view> ``` style 支持的語法: ``` <view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view> <view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view> ``` > > 注意：以:style=""這樣的方式設置px像素值，其值為實際像素，不會被編譯器轉換。 可以用?computed?方法生成?class?或者?style?字符串插入到頁面中，但是uni-app不支持?Class 與 Style 綁定中的?classObject?和 styleObject?語法。 舉例說明： ``` <template> <!-- 支持 --> <view class="container" :class="computedClassStr"></view> <view class="container" :class="{active: isActive}"></view> <!-- 不支持 --> <view class="container" :class="computedClassObject"></view> </template> <script> export default { data () { return { isActive: true } }, computed: { computedClassStr () { return this.isActive ? 'active' : '' }, computedClassObject () { return { active: this.isActive } } } } </script> ```