對象 ber ria display 當前 posit ole 技術分享 pla

第一次寫博客，如果有描述不當的地方，請多多包容，也歡迎指教。

做完第一個小程序的時候就覺得小程序的底部菜單有點坑，自己做的遮罩層根本無法遮住它，所以做第二個項目的時候，就決定自己模擬一個小程序底部菜單。下面說一下自己自定義底部菜單需要了解和註意的事項

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>

自定義小程序底部菜單