问题：小程序底部菜单栏的基本样式完全不能满足我们的审美要求，因此我们可以自行定制一组小程序底部栏。您可以设置透明的背景，还可以定义所需的任何样式，好吧，别胡说八道开发小程序菜单栏，只需转到代码即可！

首先在与.xml相同的级别上创建.xml，如右侧的屏幕截图所示

.xml的具体代码如下：下面是关于将此代码封装到模板中的信息，每个人都知道的好处是，在许多地方使用起来都很方便

{{item.text}}

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中加载页面时首先显示的，代码是下面执行的代码

//index.js //获取应用实例 const app = getApp() Page({ onLoad: function (options) { app.editTabBar(); } })

5. 2这是.wxml中的参考模板。

以上代码仅供参考！

效果如下：