自定义小程序底部菜单

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了自定义小程序底部菜单，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6642字，纯文字阅读大概需要10分钟。

内容图文

第一次写博客，如果有描述不当的地方，请多多包容，也欢迎指教。

做完第一个小程序的时候就觉得小程序的底部菜单有点坑，自己做的遮罩层根本无法遮住它，所以做第二个项目的时候，就决定自己模拟一个小程序底部菜单。下面说一下自己自定义底部菜单需要了解和注意的事项

1.小程序页面层级不能超过10级

2.小程序的wx.relaunch()可以清除所有页面痕迹并跳转至指定页面，但是，用户体验超级不好，跳转页面的时候会闪一下载跳转

3.小程序的wx.redirecto()关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。用户体验跟wx.relaunch()一样，让人看着就很不开心。

4.小程序的wx.navigateto()保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面。

5.小程序的wx.navigateBack可以通过delta返回至指定页面

综上所述，为了实现自定义的预想，又要解决用户体验问题。下面就是我的实现代码。

1.项目目录如上图

2.tabBar.wxml

<view class="wrapper"> <view hidden='{{isModal}}' class='barModal'> <view bindtap="hideToCreate" class='modal_bg'></view> <view class='inte_ite'> <view class="tobarItem" bindtap="toNewPost"> <image class="toImgbar" src="../../icon/index_material.png" /> <view>发帖子</view> </view> <view class="tobarItem" bindtap="toNewDynamic"> <image class="toImgbar" src="../../icon/index_enterprise.png" /> <view>发动态</view> </view> </view> </view> <view class="wrappe_tab"> <view bindtap='tabBarFun' class='item_con' id="{{item.id}}" wx:for="{{tabBarList}}" wx:key="id"> <image wx:if="{{!item.isCouter}}" class="{{item.class}}" src="{{item.iconPath}}" /> <image wx:if="{{item.isCouter}}" class="{{item.class}}" src="{{item.selectedIconPath}}" /> <view class="{{item.isCouter?'tab_font isCouter':'tab_font'}}">{{item.text}}</view> </view> </view> </view> 3.tabBar.js const app = getApp(); Component({ data: { isModal: true, tabBarList: [ { pagePath: "pages/index/index", text: "首页", id: 1, isCouter: true, class: "tab_logo", color: "#888888", iconPath: "../../icon/indexIcon.png", selectedColor: "#2873ff", selectedIconPath: "../../icon/indexIconSe.png", link: '../index/index' }, { pagePath: "pages/mall/mall", text: "商城", class: "tab_logo", id: 2, isCouter: false, iconPath: "../../icon/selectCarIcon.png", selectedIconPath: "../../icon/selectCarIconSe.png", link: '../mall/mall' }, { pagePath: "pages/new/new", class: "logo_mid", id: 5, isCouter: true, iconPath: "../../icon/tabBar_new.png", selectedIconPath: "../../icon/tabBar_new.png" }, { pagePath: "pages/message/message", text: "消息", class: "tab_logo", id: 3, isCouter: false, iconPath: "../../icon/consultingIcon.png", selectedIconPath: "../../icon/consultingIconSe.png", link: '../message/message' }, { pagePath: "pages/mine/mine", text: "我的", id: 4, isCouter: false, class: "tab_logo", color: "#888888", selectedColor: "#2873ff", iconPath: "../../icon/myIcon1.png", selectedIconPath: "../../icon/myIconSe.png", link: '../mine/mine' } ] }, ready: function(options) { var ts = this; var pages = getCurrentPages(); var currentPage = pages[pages.length - 1]; //获取当前页面的对象 var url = currentPage.route; //当前页面url var list = this.data.tabBarList; if (url == "pages/index/index") { list[0].isCouter = true; list[1].isCouter = false; list[4].isCouter = false; list[3].isCouter = false; this.setData({ tabBarList: list, }); //debugger } else if (url == "pages/mall/mall") { list[1].isCouter = true; list[0].isCouter = false; list[4].isCouter = false; list[3].isCouter = false; this.setData({ tabBarList: list, }); } else if (url == "pages/message/message") { list[3].isCouter = true; list[4].isCouter = false; list[1].isCouter = false; list[0].isCouter = false; this.setData({ tabBarList: list, }); } else if (url == "pages/mine/mine") { list[4].isCouter = true; list[0].isCouter = false; list[1].isCouter = false; list[3].isCouter = false; this.setData({ tabBarList: list, }); } }, methods: { hideToCreate: function () { this.setData({ isModal: true, }); }, toNewPost: function () { wx.navigateTo({ url: '../index/newPost/newPost' }); this.setData({ isModal: true, }); }, toNewDynamic: function () { wx.navigateTo({ url: "../index/newDynamic/newDynamic" }); this.setData({ isModal: true, }); }, tabBarFun: function(e) { var ts = this; var id = Number(e.currentTarget.id); var list = this.data.tabBarList; var pages = app.pages; console.log('length:'+pages.length) var currentPage = pages[pages.length - 1]; //获取当前页面的对象 var url = currentPage.route; //当前页面url let len = 0, flag = false; // debugger if (url != "pages/index/index" && id == 1) { for (let i = 0; i < pages.length; i++) { ++len; if (pages[i].route == "pages/index/index") { flag = true; break; } } console.log('len:index'+len); if (flag) { wx.navigateBack({ delta: pages.length - len }); } else { wx.navigateTo({ url: 'pages/index/index' }); } } else if (url != "pages/mall/mall" && id == 2) { for (let i = 0; i < pages.length; i++) { ++len; if (pages[i].route == "pages/mall/mall") { flag = true; break; } } if (flag) { wx.navigateBack({ delta: pages.length - len }); } else { wx.navigateTo({ url: '/pages/mall/mall' }); } } else if (url != "pages/message/message" && id == 3) { for (let i = 0; i < pages.length; i++) { ++len; if (pages[i].route == "pages/message/message") { flag = true; break; } } if (flag) { wx.navigateBack({ delta: pages.length - len }); } else { wx.navigateTo({ url: '/pages/message/message' }); } } else if (url != "pages/mine/mine" && id == 4) { for (let i = 0; i < pages.length; i++) { ++len; if (pages[i].route == "pages/mine/mine") { flag = true; break; } } if (flag) { wx.navigateBack({ delta: pages.length - len }); } else { wx.navigateTo({ url: '/pages/mine/mine' }); } } else if (id == 5) { this.setData({ isModal: !this.data.isModal, }) } } } }) ? 4.tabBar.json ? { "component": true } ? 5.tabBar.wxss ? .wrapper{ height: 100rpx; } .item_con { width: 20%; float: left; text-align: center; height: 100rpx; color: #444; }
.modal_bg { background-color: rgba(100, 100, 100, 0.6); position: fixed; width: 100%; height: 100%; }
.barModal { background-color: rgba(100, 100, 100, 0.6); position: fixed; width: 100%; height: 100%; left: 0; z-index: 1; top: 0; }
.inte_ite { position: absolute; bottom: 100rpx; left: 0; width: 100%; }
.toImgbar { width: 80rpx; height: 80rpx; }
.inte_ite { ">#fff; padding: 10rpx; }
.tobarItem { width: 50%; font-size: 28rpx; float: left; text-align: center; }
.wrappe_tab { position: fixed; left: 0; z-index: 2; height: 100rpx; width: 100%; border-top: 1rpx solid #eee; bottom: 0; ">#fff; }
.tab_logo { width: 45rpx; height: 38rpx; margin-top: 15rpx; }
.tab_font { font-size: 28rpx; position: relative; top: -4rpx; }
.logo_mid { width: 85rpx; height: 65rpx; margin-top: 17rpx; }
.isCouter { color: #2873ff; } ? 6.在需要用到的页面文件中使用，如 //index.js onShow(){ app.pages = getCurrentPages(); console.log('index.length:' + app.pages.length) }, ? //index.json { "usingComponents": { "tabBar": "../../component/tabBar/tabBar" } } ? //index.wxml ? <tabBar></tabBar> ?

内容总结

以上是互联网集市为您收集整理的自定义小程序底部菜单全部内容，希望文章能够帮你解决自定义小程序底部菜单所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---