上 一次推送我们主要对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）：
