微信小程序案例 2.1 字體和文本樣式屬性## 一、實(shí)驗(yàn)?zāi)康恼莆誛XML中style內(nèi)聯(lián)樣式與class類樣式的區(qū)別將wxml標(biāo)簽中style寫(xiě)的靜態(tài)樣式抽離遷移到WXSS使用class引用class命名遵守小程序規(guī)范使用橫杠?連接禁止駝峰命名使用scroll?view組件實(shí)現(xiàn)頁(yè)面內(nèi)容滾動(dòng)頁(yè)面內(nèi)容超出一屏理解app.wxss全局樣式、頁(yè)面wxss局部樣式的作用范圍。二、知識(shí)點(diǎn)style適合動(dòng)態(tài)變化的樣式靜態(tài)樣式不建議寫(xiě)在標(biāo)簽style屬性性能差。class在wxss定義樣式類wxml通過(guò)class調(diào)用靜態(tài)樣式優(yōu)先使用。app.wxss全局樣式全部頁(yè)面生效。pages/index/index.wxss頁(yè)面局部樣式僅當(dāng)前頁(yè)面生效局部會(huì)覆蓋全局同名樣式。scroll?view scroll?y實(shí)現(xiàn)縱向滾動(dòng)。文本常用WXSS屬性font?size字體大小、font?family字體、color文字顏色、letter?spacing字符間距、text?align對(duì)齊、text?indent首行縮進(jìn)、text?decoration下劃線、line?height行高等。三、項(xiàng)目文件結(jié)構(gòu)WX├─components│ └─navigation?bar // 自定義導(dǎo)航欄組件├─pages│ └─index│ ├─index.js│ ├─index.json│ ├─index.wxml│ └─index.wxss├─app.js├─app.json└─app.wxss四、核心代碼app.json{pages:[pages/index/index],window:{navigationBarTextStyle:black,navigationStyle:custom},style:v2,sitemapLocation:sitemap.json,lazyCodeLoading:requiredComponents}index.wxmlnavigation-bartitle字體和文本樣式設(shè)置back{{false}}colorblackbackground#FFF/navigation-barscroll-viewclassscrollareascroll-ytypelistviewclassboxviewclasstitle-style春江花月夜/viewviewclasstxt-style春江潮水連海平海上明月共潮生。滟滟隨波千萬(wàn)里何處春江無(wú)月明江流宛轉(zhuǎn)繞芳甸月照花林皆似霰空里流霜不覺(jué)飛汀上白沙看不見(jiàn)。/viewviewclasstxt-style江天一色無(wú)纖塵皎皎空中孤月輪。江畔何人初見(jiàn)月江月何年初照人人生代代無(wú)窮已江月年年望相似。不知江月待何人但見(jiàn)長(zhǎng)江送流水。/view/view/scroll-viewindex.wxsspage{height:100vh;display:flex;flex-direction:column;}.scrollarea{flex:1;overflow-y:hidden;}.box{margin:20rpx;padding:20rpx;border:2rpx solid silver;}.title-style{font-size:larger;font-weight:bolder;text-align:center;margin-bottom:30rpx;color:red;}.txt-style{font-size:x-large;font-family:隸書(shū);color:blue;letter-spacing:10rpx;text-align:justify;text-indent:2em;text-decoration:underline;text-decoration-color:#0f0;line-height:60rpx;}運(yùn)行結(jié)果展示