上 一次推送我們主要對(duì)json配置文件進(jìn)行了全面地了解和學(xué)習(xí)，相信大家對(duì)于設(shè)置常規(guī)的tabbar都已經(jīng)掌握。

那 么請(qǐng)問：底部菜單除了更換icon圖標(biāo)之外，能否實(shí)現(xiàn)其他自定義樣式？

顯 然，理論上是可以的。
不過套路上，
我可能不會(huì)馬上說~

今天以及接下來的幾次推送，我們將開始學(xué)習(xí)WXML視圖容器，并討論使用上的延伸。
現(xiàn)在，我們先從萬能的view組件開始。

01

view是小程序中最基礎(chǔ)的視圖容器，可以直接寫入文字也可以嵌套其他組件（如text等）進(jìn)行使用。

<!--WXML-->

<view>這是最簡單的view</view>

<view>
<text>
這是嵌套了text組件的view
</text>
</view>

默認(rèn)樣式下，小程序?qū)σ晥D組件的顯示按照代碼書寫的先后順序從上向下依次顯示。

<!--WXML-->

<view style=’text-align:center’>
這個(gè)是使用了行內(nèi)樣式的view，行內(nèi)樣式代表文字居中
</view>

view可以通過添加style屬性值——即行內(nèi)樣式，來定義該view的顯示樣式。

<!--WXML-->

<view class=”aaa” id=”111”>
  這個(gè)是帶有class和id的view，用于關(guān)聯(lián)WXSS中的樣式。
WXSS選擇器中，使用英文句號(hào)“. + class名”或“# + id”進(jìn)行選擇，
從而關(guān)聯(lián)WXML組件。
view屬性中的hover-class同理。
</view>

當(dāng)樣式要求相對(duì)比較多、出于代碼整潔的目的，我們通常會(huì)通過view的class或id與WXSS文件（層疊樣式表）中指定的樣式進(jìn)行綁定來定義view的顯示樣式，這種方式也稱為外聯(lián)樣式。
（關(guān)于CSS的三種關(guān)聯(lián)方式請(qǐng)查看：《小程序開發(fā)Vol.2-開發(fā)小程序必備知識(shí)基礎(chǔ)》 ）

02

<!—WXML代碼-->
<!--hover-class實(shí)例-->

<view class=’defaultview’ hover-class='clickchange'>
 點(diǎn)我改變樣式
</view>


/* WXSS代碼 */

.defaultview{
text-align:center;
font-size:18px;
margin-top:50px
}
.clickchange{
  color:blueviolet;
   letter-spacing: 20px

以上是簡單的WXML和對(duì)應(yīng)的WXSS代碼，實(shí)現(xiàn)效果如下：

上述，我們通過對(duì)view組件hover-class屬性的使用，來定義視圖組件被點(diǎn)擊時(shí)的樣式（點(diǎn)擊態(tài)效果）。

* view的其他屬性如下：

03

平常在APP或者小程序中，我們會(huì)看到一些自定義樣式的底部菜單、底部功能欄等，順著今天的話題，我們分享一個(gè)借助view組件實(shí)現(xiàn)底部菜單的demo。
<!—WXML代碼—>
<!—借助view制作底部菜單—>

<view>
<view  style='text-align:center;line-height:100rpx;width:375rpx;height:100rpx;position:fixed;left:0;
border-style:solid;border-color:  black;border-width:1px' bindtap='dibucdI'>
底部菜單1
</view>
<view  style='text-align:center;line-height:100rpx;width:375rpx;height:100rpx;position:fixed;right:0;
border-style:solid;border-color:  black;border-width:1px' bindtap='dibucdII'>
底部菜單2
</view>
</view>

/* JS代碼 */

Page({
dibucdI:function(){
    wx.navigateTo({
    url:’pages/aa/aa’
})
}
dibucdII :function(){
   wx.navigateTo({
    url :’pages/bb/bb’
})
}
})

使用以上的代碼，我們可以實(shí)現(xiàn)一個(gè)簡單的底部菜單。
不足的是，這種方式實(shí)現(xiàn)的菜單看起來似乎不夠美觀，此時(shí)我們可以通過圖片+透明點(diǎn)擊區(qū)域的方式來優(yōu)化,即界面事實(shí)上是一張完整的圖片，之后我們對(duì)圖片上用戶需要點(diǎn)擊的區(qū)域進(jìn)行定位和定義即可。

借助于CSS的各種定位樣式，我們可以讓組件出現(xiàn)在我們所希望它出現(xiàn)的地方。

舉個(gè)例子，大家通常在首頁看到的分類小圖標(biāo)，常用的編程思路是for循環(huán)渲染每一個(gè)的圖標(biāo)、文字和事件綁定，轉(zhuǎn)換到實(shí)際使用時(shí)，假如有8個(gè)小圖標(biāo)，那么手機(jī)則需要分別對(duì)圖片、文字等分別進(jìn)行8次重復(fù)渲染。
如果把這8個(gè)按鈕（圖標(biāo)+文字）全部合成一張圖片顯示，再循環(huán)定義對(duì)應(yīng)的區(qū)域的事件綁定，那么實(shí)際使用中，手機(jī)只需要先把一張圖片顯示出來，然后定位8個(gè)空白點(diǎn)擊區(qū)域的位置并渲染出來即可。

制作思路如下：
1、把我們希望呈現(xiàn)的整個(gè)菜單、界面做成一張完整的平面圖，保存到本地；
2、在上述代碼最外層view下增加嵌套image組件，src為上述圖片路徑；
3、通過調(diào)整空白點(diǎn)擊區(qū)域style屬性的“right”或“width”等校正位置和大小；
4、在點(diǎn)擊區(qū)域view的style屬性中增加“opacity :0”。

事實(shí)上現(xiàn)在的手機(jī)普遍網(wǎng)速都比較快，假如界面長度大約為個(gè)手機(jī)屏?xí)r，使用一張完整的圖片充當(dāng)界面是可以完美顯示，同時(shí)還降低了前端渲染的資源占用、減少編程代碼量、界面美觀等，推薦使用。

關(guān)于常用CSS樣式的匯總，大家可以閱讀今天推送的第二篇文章，若有其他好的方法、建議，歡迎討論。

關(guān)于我們

我們?cè)敢饫妹刻斓娜昼姡铝τ趲椭嘈旅襟w人從零基礎(chǔ)到深度掌握小程序；
我們謹(jǐn)希望在新媒體探索上，一路有你，一起成長；
這，是我們的夢想。

如果你認(rèn)同我們，請(qǐng)幫我們轉(zhuǎn)發(fā)，這將是對(duì)我們堅(jiān)持夢想最大的鼓勵(lì)！

查看原文更多詳細(xì)資料，歡迎關(guān)注公眾號(hào)【一人從零開發(fā)小應(yīng)用】（或搜索微信號(hào)：xiaochengxu1038）：