小程序自定义底部菜单栏 - 好文

问题：小程序的底部菜单栏基本的样式根本不能满足我们的审美要求，所以我们可以通过自己来自定义一套小程序底部栏，可以设置透明背景哟，想要什么样式都可以自己定义，好了，废话不多说，直接上代码！

* 首先在和pages同一级建录建立tabbar.xml,如右截图所示
* 具体的tabbar.xml代码如下所示：下面是讲这个代码封装成了一个模板，好处大家都知道，就是方便多处使用 <template
name="tabBar"> <view class="tab-bar" style="color: {{tabBar.color}};
background: {{tarBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' :
'bottom: 0'}}; {{tabBar.borderStyle? (tabBar.position=='top'? 'border-bottom:
solid 1px '+tabBar.borderStyle + ';' : 'border-top: solid 1px
'+tabBar.borderStyle + ';') : ''}}"> <block wx:for="{{tabBar.list}}"
wx:key="pagePath"> <navigator url="{{item.pagePath}}" open-type="redirect"
class="{{item.clas}}" style="{{item.active? 'color: '+(item.selectedColor?
item.selectedColor : tabBar.selectedColor) : ''}}"> <image
src="{{item.selectedIconPath}}" wx:if="{{item.active}}" class="img"></image>
<image src="{{item.iconPath}}" wx:if="{{!item.active}}" class="img"></image>
<text>{{item.text}}</text> </navigator> </block> <view class="clear"></view>
</view> </template>
3.接下来就是app.wxss中写样式了，具体代码如下所示：
/**app.wxss**/ .container { width: 100%rpx; height: 100%rpx; font-size: 32rpx;
} .menu-item { width: 24%; float: left; border-right: 1px solid rgb(200, 200,
200); text-align: center; padding-top: 8px; } .menu-item2{ border-right:none; }
.img { width: 23px; height: 23px; display: block; margin: auto; } .clear {
clear: both; } .tab-bar { background-color:rgb(243, 243, 243); opacity: .8;
position: fixed; width: 100%; /* padding: 0px 2%; */ }
4. 就是在app.js中写js动态样式了，从36行开始到最后一行
//app.js App({ onLaunch: function () { // 展示本地存储能力 var logs =
wx.getStorageSync('logs') || [] logs.unshift(Date.now())
wx.setStorageSync('logs', logs) // 登录 wx.login({ success: res => { // 发送
res.code 到后台换取 openId, sessionKey, unionId } }) // 获取用户信息 wx.getSetting({
success: res => { if (res.authSetting['scope.userInfo']) { // 已经授权，可以直接调用
getUserInfo 获取头像昵称，不会弹框 wx.getUserInfo({ success: res => { // 可以将 res 发送给后台解码出
unionId this.globalData.userInfo = res.userInfo // 由于 getUserInfo 是网络请求，可能会在
Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res) } } }) } } }) }, globalData: { userInfo: null
}, editTabBar: function () { var _curPageArr = getCurrentPages(); var _curPage
= _curPageArr[_curPageArr.length - 1]; var _pagePath = _curPage.__route__; if
(_pagePath.indexOf('/') != 0) { _pagePath = '/' + _pagePath; } var tabBar =
this.globalData.tabBar; for (var i = 0; i < tabBar.list.length; i++) {
tabBar.list[i].active = false; if (tabBar.list[i].pagePath == _pagePath) {
tabBar.list[i].active = true;//根据页面地址设置当前页面状态 } } _curPage.setData({ tabBar:
tabBar }); }, globalData: { userInfo: null, tabBar: { color: "#a9b7b7",
selectedColor: "#ff8124", borderStyle: "white", list: [ { selectedIconPath:
"/pages/image/1-1.png", iconPath: "/pages/image/1.png", pagePath:
"/pages/index/index", text: "首页", clas: "menu-item", selected: false, }, {
selectedIconPath: "/pages/image/2-1.png", iconPath: "/pages/image/2.png",
pagePath: "/pages/collect/collect", text: "收藏", clas: "menu-item", selected:
false }, { selectedIconPath: "/pages/image/3-1.png", iconPath:
"/pages/image/3.png", pagePath: "/pages/disses/disses", text: "需求填写", clas:
"menu-item", selected: false }, { selectedIconPath: "/pages/image/4-1.png",
iconPath: "/pages/image/4.png", pagePath: "/pages/index/index", text: "房屋管理",
clas: "menu-item menu-item2", selected: false } ], position: "bottom" } } })
5. 最后就是引用这个定义好的模板了，代码如下：

5.1首先带在js中页面正在加载的时候就显示出来，代码就是下面的onload执行的代码

//index.js //获取应用实例 const app = getApp() Page({ onLoad: function (options) {
app.editTabBar(); } })
5.2然后就是collection.wxml中的引用模板就可以了

 <view class="container"> <import src="../../tabbar.wxml" />
<template is="tabBar" data="{{tabBar}}" /> </view>
以上代码仅供参考！

效果如下所示:

热门工具换一换