上 一次推送我們主要對json配置文件進行了全面地了解和學習，相信大家對于設置常規的tabbar都已經掌握。
那 么請問：底部菜單除了更換icon圖標之外，能否實現其他自定義樣式？
顯 然，理論上是可以的。
不過套路上，
我可能不會馬上說~
今天以及接下來的幾次推送，我們將開始學習WXML視圖容器，并討論使用上的延伸。
現在，我們先從萬能的view組件開始。
01
view是小程序中最基礎的視圖容器，可以直接寫入文字也可以嵌套其他組件（如text等）進行使用。
<!--WXML-->
<view>這是最簡單的view</view>
<view>
<text>
這是嵌套了text組件的view
</text>
</view>
默認樣式下，小程序對視圖組件的顯示按照代碼書寫的先后順序從上向下依次顯示。
<!--WXML-->
<view style=’text-align:center’>
這個是使用了行內樣式的view，行內樣式代表文字居中
</view>
view可以通過添加style屬性值——即行內樣式，來定義該view的顯示樣式。
<!--WXML-->
<view class=”aaa” id=”111”>
這個是帶有class和id的view，用于關聯WXSS中的樣式。
WXSS選擇器中，使用英文句號“. + class名”或“# + id”進行選擇，
從而關聯WXML組件。
view屬性中的hover-class同理。
</view>
當樣式要求相對比較多、出于代碼整潔的目的，我們通常會通過view的class或id與WXSS文件（層疊樣式表）中指定的樣式進行綁定來定義view的顯示樣式，這種方式也稱為外聯樣式。
（關于CSS的三種關聯方式請查看：《小程序開發Vol.2-開發小程序必備知識基礎》 ）
02
<!—WXML代碼-->
<!--hover-class實例-->
<view class=’defaultview’ hover-class='clickchange'>
點我改變樣式
</view>
/* WXSS代碼 */
.defaultview{
text-align:center;
font-size:18px;
margin-top:50px
}
.clickchange{
color:blueviolet;
letter-spacing: 20px
以上是簡單的WXML和對應的WXSS代碼，實現效果如下：
上述，我們通過對view組件hover-class屬性的使用，來定義視圖組件被點擊時的樣式（點擊態效果）。
* view的其他屬性如下：
03
平常在APP或者小程序中，我們會看到一些自定義樣式的底部菜單、底部功能欄等，順著今天的話題，我們分享一個借助view組件實現底部菜單的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’
})
}
})
使用以上的代碼，我們可以實現一個簡單的底部菜單。
不足的是，這種方式實現的菜單看起來似乎不夠美觀，此時我們可以通過圖片+透明點擊區域的方式來優化,即界面事實上是一張完整的圖片，之后我們對圖片上用戶需要點擊的區域進行定位和定義即可。
借助于CSS的各種定位樣式，我們可以讓組件出現在我們所希望它出現的地方。
舉個例子，大家通常在首頁看到的分類小圖標，常用的編程思路是for循環渲染每一個的圖標、文字和事件綁定，轉換到實際使用時，假如有8個小圖標，那么手機則需要分別對圖片、文字等分別進行8次重復渲染。
如果把這8個按鈕（圖標+文字）全部合成一張圖片顯示，再循環定義對應的區域的事件綁定，那么實際使用中，手機只需要先把一張圖片顯示出來，然后定位8個空白點擊區域的位置并渲染出來即可。
制作思路如下：
1、把我們希望呈現的整個菜單、界面做成一張完整的平面圖，保存到本地；
2、在上述代碼最外層view下增加嵌套image組件，src為上述圖片路徑；
3、通過調整空白點擊區域style屬性的“right”或“width”等校正位置和大小；
4、在點擊區域view的style屬性中增加“opacity :0”。
事實上現在的手機普遍網速都比較快，假如界面長度大約為個手機屏時，使用一張完整的圖片充當界面是可以完美顯示，同時還降低了前端渲染的資源占用、減少編程代碼量、界面美觀等，推薦使用。
關于常用CSS樣式的匯總，大家可以閱讀今天推送的第二篇文章，若有其他好的方法、建議，歡迎討論。
關于我們
我們愿意利用每天的三分鐘，致力于幫助更多新媒體人從零基礎到深度掌握小程序；
我們謹希望在新媒體探索上，一路有你，一起成長；
這，是我們的夢想。
如果你認同我們，請幫我們轉發，這將是對我們堅持夢想最大的鼓勵！
查看原文更多詳細資料，歡迎關注公眾號【一人從零開發小應用】（或搜索微信號：xiaochengxu1038）：
