柚子快報(bào)邀請(qǐng)碼778899分享：微信小程序?qū)W習(xí)筆記（4）
柚子快報(bào)邀請(qǐng)碼778899分享：微信小程序?qū)W習(xí)筆記（4）
文章目錄
1、< template >< / template >2、樣式導(dǎo)入i、wxmlii、wxss
3、flex布局i、容器屬性ii、項(xiàng)目屬性
1、< template >< / template >
模板可以重復(fù)調(diào)用
首先要定義一個(gè)模板：
然后才能應(yīng)用該模板：
2、樣式導(dǎo)入
i、wxml
提供了 import 和 include 兩種引用方式
import 有作用域的概念，比如，在一個(gè) wxml（記為 A） 文件中引用了另一個(gè) wxml（記為B），同時(shí)，在 B 中引用了其他的 wxml （記為C）文件，那么，在 A 中，只能引用 B 中的 內(nèi)容，而不會(huì)引用 C 中，使用 import 導(dǎo)入的內(nèi)容
避免了多個(gè)頁(yè)面相互引用，陷入邏輯錯(cuò)誤
include 只會(huì)引入 除了 template style script 及其內(nèi)容，相當(dāng)于吧代碼 copy 過(guò)來(lái)
ii、wxss
尺寸單位：rpx根據(jù)指定的屏幕自適應(yīng)
樣式導(dǎo)入：
@import "相對(duì)路徑";
3、flex布局
在flex布局中，用于包含內(nèi)容的組件成為容器，容器內(nèi)部的組件成為項(xiàng)目，容器允許包含嵌套
坐標(biāo)軸是以容器的左上角為原點(diǎn)，自左向右，自上向下
也可以通過(guò)flex-direction:column將主軸改變?yōu)椋鹤陨舷蛳?，自左向?/p>
i、容器屬性
flex-direction:
flex-direction: row(默認(rèn)) | row-reverse | column | column-reverse
/*
row 坐標(biāo)軸是以容器的左上角為原點(diǎn)，自左向右，自上向下
row-reverse 坐標(biāo)軸是以容器的左上角為原點(diǎn)，自右向左，自上向下
column 自上向下，自左向右
column-reverse 自下向上，自左向右
flex-wrap:
flex-wrap: nowrap(默認(rèn)) | wrap | wrap-reverse
/*
nowrap 不換行，如果單行內(nèi)容過(guò)多，項(xiàng)目寬度會(huì)被壓縮
wrap 當(dāng)容器單行容不下所有項(xiàng)目時(shí)，允許換行
wrap-reverse 與 wrap 相同，只不過(guò)，換行方向?yàn)?wrap 的反方向
justify-content:
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly ;
flex-start（默認(rèn)值）：左對(duì)齊，沒(méi)有空隙flex-end：右對(duì)齊，沒(méi)有空隙center： 居中，沒(méi)有空隙space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。space-around：項(xiàng)目之間的間隔比 開(kāi)始和末尾 與邊框的間隔大一倍，開(kāi)始 和末尾與邊框相同space-evenly: 開(kāi)始和末尾，與項(xiàng)目之間的間隔相同
還有 align-items（項(xiàng)目在行中的對(duì)齊方式）
align-content（項(xiàng)目在非主軸的對(duì)齊方式）
ii、項(xiàng)目屬性
order:
.item{
order: 0（默認(rèn)）;/* 一個(gè)整數(shù)，表示排列的位置，數(shù)值越小越靠前 */
}
flex-shrink:（收縮因子）
.item{
flex-shrink: 1（默認(rèn)）;/* 一個(gè)非負(fù)數(shù) ，也稱(chēng)為 收縮因子*/
}
如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮小
計(jì)算公式：最終長(zhǎng)度= 原長(zhǎng) x （1 - 溢出長(zhǎng)度 x 收縮因子 / 壓縮權(quán)重 ）向下取整
上述公式只適用于 所有收縮因子的總和大于 1 的情況
壓縮權(quán)重 = 長(zhǎng)度1 x 收縮因子1 + 長(zhǎng)度2 x 收縮因子2 + …
長(zhǎng)度指的是主軸上的長(zhǎng)度
flex-grow:定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大
.item {
flex-grow: 0; /* 非負(fù)數(shù) */
}
最終長(zhǎng)度 = 原長(zhǎng)度 + 擴(kuò)張單位 x 擴(kuò)張因子 （向下取整）
擴(kuò)張單位 = 剩余空間 / 擴(kuò)張因子的總和
長(zhǎng)度指的是主軸上的長(zhǎng)度
flex-basis：根據(jù)主軸的方向代替，主軸上的寬或者高
默認(rèn) auto（其優(yōu)先級(jí)比數(shù)值低）如果，不是 auto 而是數(shù)字，則優(yōu)先級(jí)大于 項(xiàng)目的寬或者高
柚子快報(bào)邀請(qǐng)碼778899分享：微信小程序?qū)W習(xí)筆記（4）
推薦鏈接
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Trademe新西蘭優(yōu)選
