uni-app 頁面樣式

頁面樣式與布局

尺寸單位

uni-app 支持的通用 css 單位包括 px、rpx

• px 即屏幕像素
• rpx 即響應(yīng)式px，一種根據(jù)屏幕寬度自適應(yīng)的動態(tài)單位。以750寬的屏幕為基準(zhǔn)，750rpx恰好為屏幕寬度。屏幕變寬，rpx 實(shí)際顯示效果會等比放大。

vue頁面支持普通H5單位，但在nvue里不支持：

• rem 默認(rèn)根字體大小為 屏幕寬度/20（微信小程序、字節(jié)跳動小程序、App、H5）
• vh viewpoint height，視窗高度，1vh等于視窗高度的1%
• vw viewpoint width，視窗寬度，1vw等于視窗寬度的1%

nvue還不支持百分比單位。

App端，在 pages.json 里的 titleNView 或頁面里寫的 plus api 中涉及的單位，只支持 px。注意此時(shí)不支持 rpx

nvue中，uni-app 模式（nvue 不同編譯模式介紹）可以使用 px 、rpx，表現(xiàn)與 vue 中一致。weex 模式目前遵循weex的單位，它的單位比較特殊：

• px:，以750寬的屏幕為基準(zhǔn)動態(tài)計(jì)算的長度單位，與 vue 頁面中的 rpx 理念相同。（一定要注意 weex 模式的 px，和 vue 里的 px 邏輯不一樣。）
• wx：與設(shè)備屏幕寬度無關(guān)的長度單位，與 vue 頁面中的 px 理念相同

下面對 rpx 詳細(xì)說明：

設(shè)計(jì)師在提供設(shè)計(jì)圖時(shí)，一般只提供一個(gè)分辨率的圖。

嚴(yán)格按設(shè)計(jì)圖標(biāo)注的 px 做開發(fā)，在不同寬度的手機(jī)上界面很容易變形。

而且主要是寬度變形。高度一般因?yàn)橛袧L動條，不容易出問題。由此，引發(fā)了較強(qiáng)的動態(tài)寬度單位需求。

微信小程序設(shè)計(jì)了 rpx 解決這個(gè)問題，uni-app 在 App 端、H5 端都支持了 rpx。

rpx 是相對于基準(zhǔn)寬度的單位，可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。uni-app 規(guī)定屏幕基準(zhǔn)寬度 750rpx。

開發(fā)者可以通過設(shè)計(jì)稿基準(zhǔn)寬度計(jì)算頁面元素 rpx 值，設(shè)計(jì)稿 1px 與框架樣式 1rpx 轉(zhuǎn)換公式如下：

設(shè)計(jì)稿 1px / 設(shè)計(jì)稿基準(zhǔn)寬度 = 框架樣式 1rpx / 750rpx

換言之，頁面元素寬度在 uni-app 中的寬度計(jì)算公式：

750 * 元素在設(shè)計(jì)稿中的寬度 / 設(shè)計(jì)稿基準(zhǔn)寬度

舉例說明：

1. 若設(shè)計(jì)稿寬度為 750px，元素 A 在設(shè)計(jì)稿上的寬度為 100px，那么元素 A 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 100 / 750，結(jié)果為：100rpx。
2. 若設(shè)計(jì)稿寬度為 640px，元素 A 在設(shè)計(jì)稿上的寬度為 100px，那么元素 A 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 100 / 640，結(jié)果為：117rpx。
3. 若設(shè)計(jì)稿寬度為 375px，元素 B 在設(shè)計(jì)稿上的寬度為 200px，那么元素 B 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 200 / 375，結(jié)果為：400rpx。

Tips

• 注意 rpx 是和寬度相關(guān)的單位，屏幕越寬，該值實(shí)際像素越大。如不想根據(jù)屏幕寬度縮放，則應(yīng)該使用 px 單位。
• 如果開發(fā)者在字體或高度中也使用了 rpx ，那么需注意這樣的寫法意味著隨著屏幕變寬，字體會變大、高度會變大。如果你需要固定高度，則應(yīng)該使用 px 。
• rpx不支持動態(tài)橫豎屏切換計(jì)算，使用rpx建議鎖定屏幕方向
• 設(shè)計(jì)師可以用 iPhone6 作為視覺稿的標(biāo)準(zhǔn)。
• 如果設(shè)計(jì)稿不是750px，HBuilderX提供了自動換算的工具，詳見：https://ask.dcloud.net.cn/article/35445。
• App端，在 pages.json 里的 titleNView 或頁面里寫的 plus api 中涉及的單位，只支持 px，不支持 rpx。
• 早期 uni-app 提供了 upx ，目前已經(jīng)推薦統(tǒng)一改為 rpx 了，詳見

樣式導(dǎo)入

使用@import語句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對路徑，用;表示語句結(jié)束。

示例代碼：

<style>
    @import "../../common/uni.css";

    .uni-card {
        box-shadow: none;
    }
</style>

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

框架組件上支持使用 style、class 屬性來控制組件的樣式。

• style：靜態(tài)的樣式統(tǒng)一寫到 class 中。style 接收動態(tài)的樣式，在運(yùn)行時(shí)會進(jìn)行解析，請盡量避免將靜態(tài)的樣式寫進(jìn) style 中，以免影響渲染速度。<view :style="{color:color}" />
• class：用于指定樣式規(guī)則，其屬性值是樣式規(guī)則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。<view class="normal_view" />

選擇器

目前支持的選擇器有：

注意：

• 在 uni-app 中不能使用 * 選擇器。
• page 相當(dāng)于 body 節(jié)點(diǎn)，例如：<!-- 設(shè)置頁面背景顏色 --> page { background-color:#ccc; }

全局樣式與局部樣式

定義在 App.vue 中的樣式為全局樣式，作用于每一個(gè)頁面。在 pages 目錄下 的 vue 文件中定義的樣式為局部樣式，只作用在對應(yīng)的頁面，并會覆蓋 App.vue 中相同的選擇器。

注意：

• App.vue 中通過 @import 語句可以導(dǎo)入外聯(lián)樣式，一樣作用于每一個(gè)頁面。
• nvue頁面暫不支持全局樣式

CSS變量

uni-app 提供內(nèi)置 CSS 變量

注意：

• var(--status-bar-height) 此變量在微信小程序環(huán)境為固定 25px，在 App 里為手機(jī)實(shí)際狀態(tài)欄高度。
• 當(dāng)設(shè)置 "navigationStyle":"custom" 取消原生導(dǎo)航欄后，由于窗體為沉浸式，占據(jù)了狀態(tài)欄位置。此時(shí)可以使用一個(gè)高度為 var(--status-bar-height) 的 view 放在頁面頂部，避免頁面內(nèi)容出現(xiàn)在狀態(tài)欄。
• 由于在H5端，不存在原生導(dǎo)航欄和tabbar，也是前端div模擬。如果設(shè)置了一個(gè)固定位置的居底view，在小程序和App端是在tabbar上方，但在H5端會與tabbar重疊。此時(shí)可使用--window-bottom，不管在哪個(gè)端，都是固定在tabbar上方。
• 目前 nvue 在App端，還不支持 --status-bar-height變量，替代方案是在頁面onLoad時(shí)通過uni.getSystemInfoSync().statusBarHeight獲取狀態(tài)欄高度，然后通過style綁定方式給占位view設(shè)定高度。下方提供了示例代碼

代碼塊

快速書寫css變量的方法是：在css中敲hei，在候選助手中即可看到3個(gè)css變量。（HBuilderX 1.9.6以上支持）

示例1 - 普通頁面使用css變量：

<template>
    <!-- HBuilderX 2.6.3+ 新增 page-meta, 詳情：https://uniapp.dcloud.io/component/page-meta -->
    <page-meta>
        <navigation-bar />
    </page-meta>
    <view>
        <view class="status_bar">
            <!-- 這里是狀態(tài)欄 -->
        </view>
        <view> 狀態(tài)欄下的文字 </view>
    </view>
</template>    
<style>
    .status_bar {
        height: var(--status-bar-height);
        width: 100%;
    }
</style>

<template>
    <view>
        <view class="toTop">
            <!-- 這里可以放一個(gè)向上箭頭，它距離底部tabbar上浮10px-->
        </view>
    </view>
</template>    
<style>
    .toTop {
        bottom: calc(var(--window-bottom) + 10px)
    }
</style>

示例2 - nvue頁面獲取狀態(tài)欄高度

<template>
    <view class="content">
        <view :style="{ height: iStatusBarHeight + 'px'}"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                iStatusBarHeight:0
            }
        },
        onLoad() {
            this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
        }
    }
</script>

固定值

uni-app 中以下組件的高度是固定的，不可修改：

各小程序平臺，包括同小程序平臺的iOS和Android的高度也不一樣。

Flex布局

為支持跨平臺，框架建議使用Flex布局，關(guān)于Flex布局可以參考外部文檔A Complete Guide to Flexbox、阮一峰的flex教程等。

背景圖片

uni-app 支持使用在 css 里設(shè)置背景圖片，使用方式與普通 web 項(xiàng)目大體相同，但需要注意以下幾點(diǎn)：

• 支持 base64 格式圖片。
• 支持網(wǎng)絡(luò)路徑圖片。
• 小程序不支持在css中使用本地文件，包括本地的背景圖和字體文件。需以base64方式方可使用。App端在v3模式以前，也有相同限制。v3編譯模式起支持直接使用本地背景圖和字體。
• 使用本地路徑背景圖片需注意：為方便開發(fā)者，在背景圖片小于 40kb 時(shí)，uni-app 編譯到不支持本地背景圖的平臺時(shí)，會自動將其轉(zhuǎn)化為 base64 格式；圖片大于等于 40kb，會有性能問題，不建議使用太大的背景圖，如開發(fā)者必須使用，則需自己將其轉(zhuǎn)換為 base64 格式使用，或?qū)⑵渑驳椒?wù)器上，從網(wǎng)絡(luò)地址引用。本地背景圖片的引用路徑推薦使用以 ~@ 開頭的絕對路徑。 .test2 { background-image: url('~@/static/logo.png'); }

注意

• 微信小程序不支持相對路徑（真機(jī)不支持，開發(fā)工具支持）

字體圖標(biāo)

uni-app 支持使用字體圖標(biāo)，使用方式與普通 web 項(xiàng)目相同，需要注意以下幾點(diǎn)：

• 支持 base64 格式字體圖標(biāo)。
• 支持網(wǎng)絡(luò)路徑字體圖標(biāo)。
• 小程序不支持在css中使用本地文件，包括本地的背景圖和字體文件。需以base64方式方可使用。App端在v3模式以前，也有相同限制。v3編譯模式起支持直接使用本地背景圖和字體。
• 網(wǎng)絡(luò)路徑必須加協(xié)議頭 https。
• 從 http://www.iconfont.cn 上拷貝的代碼，默認(rèn)是沒加協(xié)議頭的。
• 從 http://www.iconfont.cn 上下載的字體文件，都是同名字體（字體名都叫iconfont，安裝字體文件時(shí)可以看到），在nvue內(nèi)使用時(shí)需要注意，此字體名重復(fù)可能會顯示不正常，可以使用工具修改。
• 使用本地路徑圖標(biāo)字體需注意：為方便開發(fā)者，在字體文件小于 40kb 時(shí)，uni-app 會自動將其轉(zhuǎn)化為 base64 格式；字體文件大于等于 40kb，仍轉(zhuǎn)換為 base64 方式使用的話可能有性能問題，如開發(fā)者必須使用，則需自己將其轉(zhuǎn)換為 base64 格式使用，或?qū)⑵渑驳椒?wù)器上，從網(wǎng)絡(luò)地址引用；字體文件的引用路徑推薦使用以 ~@ 開頭的絕對路徑。 @font-face { font-family: test1-icon; src: url('~@/static/iconfont.ttf'); }

nvue中不可直接使用css的方式引入字體文件，需要使用以下方式在js內(nèi)引入。nvue內(nèi)不支持本地路徑引入字體，請使用網(wǎng)絡(luò)鏈接或者base64形式。src字段的url的括號內(nèi)一定要使用單引號。

var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
  'fontFamily': "fontFamilyName",
  'src': "url('https://...')"
})

示例：

<template>
    <view>
        <view>
            <text class="test">&#xe600;</text>
            <text class="test">&#xe687;</text>
            <text class="test">&#xe60b;</text>
        </view>
    </view>
</template>
<style>
    @font-face {
        font-family: 'iconfont';
        src: url('https://at.alicdn.com/t/font_865816_17gjspmmrkti.ttf') format('truetype');
    }
    .test {
        font-family: iconfont;
        margin-left: 20rpx;
    }
</style>

<template/>和<block/> 

uni-app 支持在 template 模板中嵌套 <template/> 和 <block/>，用來進(jìn)行 列表渲染 和 條件渲染。

<template/> 和 <block/> 并不是一個(gè)組件，它們僅僅是一個(gè)包裝元素，不會在頁面中做任何渲染，只接受控制屬性。

代碼示例

<template>
    <view>
        <template v-if="test">
            <view>test 為 true 時(shí)顯示</view>
        </template>
        <template v-else>
            <view>test 為 false 時(shí)顯示</view>
        </template>
    </view>
</template>

<template>
    <view>
        <block v-for="(item,index) in list" :key="index">
            <view>{{item}} - {{index}}</view>
        </block>
    </view>
</template>