柚子快報邀請碼778899分享：【小程序】WXSS模板樣式

http://yzkb.51969.com/

目錄

WXSS模板樣式

概述

什么是WXSS

WXSS 和 CSS 的關(guān)系

rpx

什么是rpx尺寸單位

rpx的實(shí)現(xiàn)原理

樣式導(dǎo)入

@import 語法格式

全局樣式和局部樣式

全局樣式?

局部樣式

全局配置?

全局配置文件及常用的配置項(xiàng)

window

小程序窗口的組成部分?

window節(jié)點(diǎn)常用的配置項(xiàng)

設(shè)置導(dǎo)航欄的標(biāo)題

設(shè)置導(dǎo)航欄的背景色

設(shè)置導(dǎo)航欄的標(biāo)題文本顏色

設(shè)置頁面下拉刷新的效果

設(shè)置下拉刷新時窗口的背景色

設(shè)置下拉刷新時loading的背景顏色

設(shè)置上拉觸底的距離

tabBar

什么是tabBar

tabBar的6個組成部分

tabBar節(jié)點(diǎn)的配置項(xiàng)?

每個tab項(xiàng)的配置選項(xiàng)

WXSS模板樣式

概述

什么是WXSS

WXSS是一套樣式語言，用于美化WXML的組件樣式，類似于網(wǎng)頁開發(fā)中的CSS

WXSS 和 CSS 的關(guān)系

WXSS具有CSS大部分特性，同時，WXSS還對CSS 進(jìn)行了擴(kuò)充以及修改，以適應(yīng)微信小程序的開發(fā)。與CSS相比，WXSS擴(kuò)展的特性有：

rpx尺寸單位@import樣式導(dǎo)入

rpx

什么是rpx尺寸單位

rpx是微信小程序獨(dú)有的，用來解決屏適配的尺寸單位

rpx的實(shí)現(xiàn)原理

rpx的實(shí)現(xiàn)原理非常簡單：鑒于不同設(shè)備屏幕的大小不同，為了實(shí)現(xiàn)屏幕的自動適配，rpx把所有設(shè)備的屏幕，在寬度上等分為750份（即：當(dāng)前屏幕的總寬度為750px）

在較小的設(shè)備上，1rpx所代表的寬度較小在較大的設(shè)備上，1rpx所代表的寬度較大

小程序在不同設(shè)備上運(yùn)行的時候，會自動把rpx的樣式單位換算成對應(yīng)的像素單位來渲染，從而實(shí)現(xiàn)屏幕適配。

樣式導(dǎo)入

使用WXSS提供的 @import 語法，可以導(dǎo)入外聯(lián)的樣式表。

@import 語法格式

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

@import "common.wxss"

//在當(dāng)前頁面的wxss文件中

全局樣式和局部樣式

全局樣式?

定義在 app.wxss中的樣式為全局樣式，作用于每一個頁面

局部樣式

在頁面的 .wxss 文件中定義的樣式稱為局部樣式，只作用與當(dāng)前頁面。

注意：

當(dāng)局部樣式和全局樣式?jīng)_突時，根據(jù)就近原則，局部樣式會覆蓋全局樣式當(dāng)局部樣式的權(quán)重大于或等于全局樣式的權(quán)重時，才會覆蓋全局的樣式

全局配置?

全局配置文件及常用的配置項(xiàng)

小程序根目錄下的 app.json文件是小程序的全局配置文件，常用的配置項(xiàng)如下：

pages? ? ? ?| 記錄當(dāng)前小程序所有頁面的存放路徑window? ? ?| 全局設(shè)置小程序窗口的外觀tabBar? ? ? |設(shè)置小程序底部的tabBar效果style? ? ? ? ? |是否啟用新版的組件樣式

window

小程序窗口的組成部分?

而我們在window中可以配置導(dǎo)航欄區(qū)域和背景區(qū)域

window節(jié)點(diǎn)常用的配置項(xiàng)

屬性名類型默認(rèn)值說明navigationBarTitleTextString字符串導(dǎo)航欄標(biāo)題文字內(nèi)容navigationBarBackgroundColorHexColor#000000導(dǎo)航欄背景顏色navigationBarTextStyleStringwhite導(dǎo)航欄標(biāo)題顏色，僅支持black/whitebackgroundColorHexColor#ffffff窗口的背景色backgroundTextStyleStringdark下拉loading的樣式，僅支持dark/lightenablePullDownRefreshBooleanfalse是否全局開啟下拉刷新onReachBottomDistanceNumber50頁面上拉觸底事件觸發(fā)時，距頁面底部的距離，單位為px

設(shè)置導(dǎo)航欄的標(biāo)題

設(shè)置步驟：app.json->window->navigationBarTileText

設(shè)置導(dǎo)航欄的背景色

設(shè)置步驟：app.json->window->navigationBarBackgroundColor

設(shè)置導(dǎo)航欄的標(biāo)題文本顏色

設(shè)置步驟：app.json->window->navigationBarTextStyle

設(shè)置頁面下拉刷新的效果

設(shè)置步驟：app.json->window中 ，添加 "enablePullDownRefresh":?true

設(shè)置下拉刷新時窗口的背景色

設(shè)置步驟：app.json->window中 ，添加 "backgroundColor":?"#ffffff"

設(shè)置下拉刷新時loading的背景顏色

設(shè)置步驟：app.json->window中 ，添加 "backgroundTextStyle":?"dark"

設(shè)置上拉觸底的距離

通過手指在屏幕上的上拉滑動操作，從而加載更多數(shù)據(jù)的行為

設(shè)置步驟：app.json->window中 ，添加 "onReachBottomDistance":?100

默認(rèn)50px

tabBar

什么是tabBar

tabBar是移動端應(yīng)用常見的頁面效果，用于實(shí)現(xiàn)多頁面的快速切換，小程序中通常將其分為：

底部tabBar頂部tabBar

注意：

tabBar中只能配置最少2個，最多5個tab頁簽當(dāng)渲染頂部tabBar時，不顯示icon，只顯示文本?

tabBar的6個組成部分

backgroundColor：tabBar的背景色selectedIconPath：選中時的圖片路徑borderStyle：tabBar上邊框的顏色iconPath：未選中時的圖片路徑selectedColor：tab上的文字選中時的顏色color：tab上文字的默認(rèn)（未選中）的顏色

tabBar節(jié)點(diǎn)的配置項(xiàng)?

屬性類型必填默認(rèn)值描述positionString否bottomtabBar的位置，僅支持bottom/topborderStyleString否blacktabBar上邊框的顏色，僅支持black/whitecolorHexColor否tab上文字的默認(rèn)（未選中）的顏色selectedColorHexColor否tab上的文字選中時的顏色backgroundColorHexColor否tabBar的背景色listArray是tab頁簽的列表，最少兩個，最多五個tab項(xiàng)

每個tab項(xiàng)的配置選項(xiàng)

屬性類型必填描述pagePathString是頁面路徑，頁面必須在pages中預(yù)先定義textString是tab上顯示的文字iconPathString否未選中時的圖標(biāo)路徑selectedIconPathString否選中時的圖標(biāo)路徑

在app.json中添加?

柚子快報邀請碼778899分享：【小程序】WXSS模板樣式

http://yzkb.51969.com/

文章鏈接