快應(yīng)用頁面樣式與布局

在課程的大綱

• 盒模型
• 長度單位
• 設(shè)置樣式
• Flex布局示例
• 動態(tài)修改樣式
• 引入less預(yù)編譯

盒模型

框架使用border-box模型，暫不支持content-box模型與box-sizing屬性

布局所占寬度Width:

width = width(包含padding-left+ padding-right +border-left + border-right)

布局所占寬度Height:

Height = height(包含padding-top + padding-bottom +border-top + border-bottom)

長度單位

框架目前僅支持長度單位 px 和 %。與傳統(tǒng)web頁面不同，px是相對于項(xiàng)目配置基準(zhǔn)寬度的單位。

設(shè)計(jì)稿1px / 設(shè)計(jì)稿基準(zhǔn)寬度 = 框架樣式1px / 項(xiàng)目配置基準(zhǔn)寬度

項(xiàng)目配置基準(zhǔn)寬度：項(xiàng)目的配置文件（<ProjectName>/src/mainfest.json）中config.designWidth的值，默認(rèn)為750

若設(shè)計(jì)寬度為640px,元素A在設(shè)計(jì)稿的寬度為100px，實(shí)現(xiàn)的兩種方案如下：

1.框架樣式1px 等于 設(shè)計(jì)稿1px

修改<ProjectName>/src/mainfest.json中，修改config.designWidth:

{
    "config": {
        "designWidth": 640
    }
}

2.不修改項(xiàng)目配置基準(zhǔn)寬度：若當(dāng)前項(xiàng)目配置的 基準(zhǔn)寬度為 750，
設(shè)計(jì)稿寬度100px,在框架為 100 / 640 = x / 750 推出：x = 117

在框架寬度為：117px

設(shè)置樣式

開發(fā)可以使用 內(nèi)聯(lián)樣式、tag選擇器、class選擇器、id選擇器來為組件設(shè)置樣式

同時(shí)也可以使用 并列選擇、后代選擇器設(shè)置樣式

    <template>
        <div class="tutorial-page">
            <text style="color: #FF0000;">內(nèi)聯(lián)樣式</text>
            <text id="title">ID選擇器</text>
            <text class="title">class選擇器</text>
            <text>tag選擇器</text>
        </div>
    </template>
    
    <style>
        .tutorial-page {
            flex-direction:column;
        }
        /* tag選擇器 */
        text {
            color: #0000FF;
        }
        /* class 選擇器（推薦）*/ 
        .title {
            color: #00FFOO;
        }
        /* ID選擇器 */
        #title {
            color: #00A000;
        }
        /* 并列選擇 */ 
        #title,.title {
            font-weight:bold;
        }
        /* 后代選擇 */ 
        .tutorial-page text {
            font-size: 42px;
        }
        /* 直接后代選擇器 */ 
        .tutorial-page > text {
            text-decoration:underline;
        }
    </style>

Flex布局示例

框架使用Flex 布局，div作為Flex容器組件，具有Flex布局的特性；text、a、span、label組件為文本容器組件，其它組件不能直接放置文本內(nèi)容。

    <template>
        <div class="tutorial-page">
            <div class="item">
                <text>item1</text>
            </div>
            <div class="item">
                <text>item2</text>
            </div>
        </div>
    </template>
    
    <style>
        .tutorial-page {
            /* 交叉軸居中*/
            align-items:center;
            /* 縱向排列*/
            flex-direction:column;
        }
        .tutorial-page >.item {
           /* 空間足夠時(shí)，允許壓縮*/
           /* flex-shrink:1;*/
           /* 空間不足時(shí)，不允許壓縮*/
            flex-shrink:0;
            /*主軸居中*/
            justify-content:center;
            width: 200px;
            height: 100px;
            margin:10px;
            background-color: #FF0000;
        }
    </style>

動態(tài)修改樣式

動態(tài)修改樣式有多種方式。與傳統(tǒng)前端開發(fā)習(xí)慣一致，包括但不限于以下兩種：

• 修改class: 更新組件的class屬性中使用的變量的值
• 修改內(nèi)聯(lián)style:更新組件的style屬性中的某個(gè)CSS的值

    <template>
        <div style="flex-direction: column;">
            <text class="normal-text {{className}}" onclick="changeClassName">點(diǎn)擊我修改文字顏色</text>
            <text style="color:{{textColor}}" onclick="changeInlineStyle">點(diǎn)擊我修改文字顏色</text>
        </div>
    </template>
    
    <style>
        .normal-text {
            font-weight:bold;
        }
        .text-blue {
            color: #0FAEFF;
        }
        .text-red {
            color: #F76160;
        }
    </style>
    
    <script>
        export default {
            private: {
                className: 'text-blue',
                textColor: #0FAEFF
            },
            
            onInit() {
                this.$page.setTitleBar({text: '動態(tài)修改樣式'})
            },
            
            changeClassName() {
                this.className = 'text-red'
            },
            
            changeInlineStyle() {
                this.textColor = '#F76160'
            }
            
        }
    </script>

引入less預(yù)編譯

首先要安裝相關(guān)庫的：less、less-loader

在終端用命令：

sudo npm install -g less
sudo npm install -g less-loader

安裝成功后，可以用lessc -v查看版本號

使用外部的less style 示例如下：

    <template>
        <div class="tutorial-page">
            <text id="title">less示例</text>
        </div>
    </template>
    
    <style lang="less">
        /*引入外部less文件*/
        @import './style.less';
        .tutorial-page {
            /*主軸居中*/
            justify-content: center;
            background-color: #00BEAF;
            
            #title {
                color: #FF0000;
            }
        }
    </style>