微信小程序（四）切换自定义菜单栏的骚操作你一定不能错过

鍓嶈█寮€鍙戝皬绋嬪簭鏃讹紝瀹樻柟鑿滃崟鏍忚冻澶熶簡锛屼竴鑸殑绋嬪簭鍙兘瑕佸鍒犳敼鏌ヨ彍鍗昩ar鍥犱负浜у搧缁忕悊鐨勪竴鍙ヨ瘽鈥滈〉闈㈠お澶氾紝鎵€浠ュ姞涓彍鍗曗€濄€傝繖鏃跺€欏唴缃殑灏变笉鑳芥弧瓒抽渶姹備簡銆傚畾涔夎彍鍗曟爮銆備笉杩囧畼鏂硅嚜瀹氫箟鐨勮彍鍗曟爮鏈変竴涓壒鐐癸紝灏辨槸鑿滃崟鏍忕殑椤甸潰蹇呴』鏄竴涓狢omponent銆傚鏋滈」鐩繘琛屽埌涓€鍗婇渶瑕佹坊鍔犮€佸垹闄ゆ垨淇敼鑿滃崟鏍忥紝璇蜂娇鐢ㄥ畼鏂硅嚜瀹氫箟鑿滃崟鏍忋€傝彍鍗曟爮闇€瑕佹妸page椤甸潰鏀规垚Component锛屼慨鏀归〉闈㈤€昏緫浼氳€楄垂澶ч噺鏃堕棿锛屼細寰堥夯鐑︺€傛墍浠ヨ繖涓椂鍊欐垜浠彲浠ヤ娇鐢ㄥ畼鏂圭殑鑿滃崟鏍忓拰鎴戜滑鑷繁灏佽鐨勮彍鍗曟爮鐨勭粍鍚堬紝鏃㈠彲浠ヨ妭鐪佷慨鏀归€昏緫鐨勬椂闂达紝鍙堝彲浠ヤ韩鍙楀唴缃彍鍗曡壇濂界殑浜や簰鎬с€傛€濊矾鏄垜浠彲浠ヤ娇鐢ㄥ皬绋嬪簭鑷甫鐨勮彍鍗曞拰鎴戜滑鑷繁灏佽鐨勮嚜瀹氫箟鑿滃崟缁勪欢銆傚叿浣撻€昏緫鏄繖鏍风殑锛氭垜浠彲浠ュ厛鍦ㄥ叏灞€鐨刟pp.js鏂囦欢鐨勫叏灞€鍙橀噺globalData涓畾涔変竴涓嚱鏁版潵鍖哄垎鏄剧ず鑷畾涔夎彍鍗曡繕鏄畼鏂硅彍鍗曘€傚唴缃彍鍗曠殑鍙橀噺tabbar_type閫氳繃tabbar_type鏉ュ尯鍒嗗湪姣忎釜鑿滃崟椤甸潰鏄剧ず瀹樻柟鑿滃崟鏍忚繕鏄嚜宸卞皝瑁呯殑鑷畾涔夎彍鍗曟爮銆傛樉绀鸿嚜瀹氫箟鑿滃崟鏍忔椂锛岃皟鐢ㄥ畼鏂规彁渚涚殑API闅愯棌瀹樻柟鑿滃崟鏍忋€傛樉绀哄畼鏂硅彍鍗曟爮鏃讹紝閫氳繃淇敼鍏ㄥ眬鍙橀噺tabbar_type鐨勫€奸殣钘忚嚜瀹氫箟鑿滃崟鏍忋€傚畬鎴愮殑鏁堟灉灏卞疄鐜颁簡銆傞鍏堝湪app.json椤甸潰閰嶇疆瀹樻柟鑿滃崟鏍?tabBar":{"custom":false,"color":"#999999","selectedColor":"#00C3B3","borderStyle":"black","backgroundColor":"#f8f8f8","list":[{"selectedIconPath":"/assets/img/homeActive.png","iconPath":"/assets/img/home.png","pagePath":"椤甸潰/index/index","text":"Homepage"},{"selectedIconPath":"/assets/img/mallActive.png","iconPath":"/assets/img/mall.png","pagePath":"pages/index/index","text":"Mall"},{"selectedIconPath":"/assets/img/myActive.png","iconPath":"/assets/img/my.png","pagePath":"pages/index/index","text":"My"}]}锛岀劧鍚庡皝瑁呬竴涓嚜瀹氫箟鐨勮彍鍗曟爮缁勪欢鐩綍缁撴瀯锛?components+shopping-tabbar-index.js-index.json-index.wxml-index.wxssindex.js鏂囦欢浠ｇ爜//components/shopping-tabbar/index.jsconstapp=getApp();Component({/***Component灞炴€у垪琛?/properties:{selected:{type:Number,default:0}},/***缁勪欢鐨勫垵濮嬫暟鎹?/data:{selectedIndex:0,color:"#999999",selectedColor:"#00C3B3",list:[{"selectedIconPath":"/assets/img/mallActive.png","iconPath":"/assets/img/mall.png","pagePath":"/pages/index/index","text":"Mall"},{"selectedIconPath":"/assets/img/cartActive.png","iconPath":"/assets/img/cart.png","pagePath":"/pages/index/index","text":"璐墿杞?},{"selectedIconPath":"/assets/img/orderActive.png","iconPath":"/assets/img/order.png","pagePath":"/pages/index/index","text":"璁㈠崟"}]},闄勶細function(){this.setData({selectedIndex:this.properties.selected})},/***缁勪欢鐨勬柟娉曞垪琛?/methods:{switchTab(e){letdata=e.currentTarget.datasetleturl=data.pathwx.redirectTo({url,fail:function(err){wx.switchTab({url})},success:()=>{this.setData({selectedIndex:data.index})}})wx.hideTabBar({animation:false,success:()=>{app.globalData.tabbar_type=2}})}},})index.wxml鏂囦欢{{item.text}}鐒跺悗鍦ㄩ渶瑕佽嚜瀹氫箟鑿滃崟缁勪欢鐨勯〉闈㈠紩鍏elected浣滀负鑿滃崟鐨勫簭鍙枫€備緥濡傛垚鍝佹晥鏋滃姩鎬佸浘鐗囦腑鐨勮嚜瀹氫箟鑿滃崟鏈夊晢鍩庛€佽喘鐗┿€佹苯杞﹀拰璁㈠崟涓変釜椤甸潰锛屽簭鍙峰垎鍒负1銆?銆?鐒跺悗鍦ㄨ嚜瀹氫箟鑿滃崟鏍忛〉闈紙鍟嗗煄銆佽喘鐗╄溅銆佽鍗曪級涓璷nShow()鏂规硶锛屽垵濮嬪寲鍙橀噺this.setData({tabbar_type:app.globalData.tabbar_type})鏄惁鏄剧ず鑿滃崟銆傛垜浠皝瑁呯殑鑷畾涔夎彍鍗曟爮鐨勯〉闈㈡槸閫氳繃鍟嗗煄鐨勯〉闈腑杞殑銆傝繖涓〉闈㈠緢鐗瑰埆銆傚畠涓嶄粎鏄畼鏂硅彍鍗曚腑鐨勪竴涓〉闈紝杩樹娇鐢ㄤ簡鎴戜滑鑷繁灏佽鐨勮嚜瀹氫箟鑿滃崟鏍忕粍浠躲€傛垜浠彲浠ラ€氳繃瀹樻柟鎻愪緵鐨刼nTabItemTap()鏉ョ洃鍚€傚綋鏄剧ず瀹樻柟鑿滃崟鏍忥紝鐐瑰嚮鏍囩椤垫椂锛屼細闅愯棌瀹樻柟鑿滃崟鏍忥紝鏄剧ず鎴戜滑鑷繁灏佽鐨勮嚜瀹氫箟鑿滃崟鏍忋€?***褰撳墠鏍囩椤佃鐐瑰嚮鏃?@param{*}item*/onTabItemTap(item){wx.hideTabBar({animation:false,success:()=>{this.setData({tabbar_type:2})app.globalData.tabbar_type=2}})}锛岀劧鍚庡鐞嗕腑杞〉闈㈠晢鍩庨〉闈㈢殑杩斿洖浜嬩欢濡備笅锛氶殣钘忚嚜宸卞皝瑁呯殑鑿滃崟鏍忥紝鏄剧ず瀹樻柟鑿滃崟鏍弉avToBack(){letpages=getCurrentPages();//鑾峰彇涓婁竴椤电殑璺緞letprevpageHtml=pages[0].__displayReporter.showReferpagepath;wx.showTabBar({animation:true,success:()=>{wx.switchTab({url:`/${prevpageHtml.substring(0,prevpageHtml.lastIndexOf('.html'))}`,})杩欎釜銆俿etData({tabbar_type:1})app.globalData.tabbar_type=1;}})}锛岀敤瀹樻柟鐨勮彍鍗曟€荤粨鑿滃崟鏍忓拰鑷皝瑁呯殑鑷畾涔夎彍鍗曟爮缁撳悎浣跨敤鐨勫ソ澶勬槸浣犱笉浠呭彲浠ヤ韩鍙楀畼鏂硅彍鍗曟爮鐨勫弸濂戒氦浜掞紝涔熻妭鐪佷簡鍥犻渶姹傛洿鏀硅彍鍗曟爮鏃讹紝浠庨〉闈㈠埌缁勪欢鏇存敼tabbar椤甸潰鎵€闇€鐨勬椂闂淬€傝繖鏍风殑椋庨獨鎿嶄綔鍦ㄨ繖绉嶆儏鍐典笅杩樻槸寰堝彲琛岀殑锛屽搱鍝堛€傚浜嗭紝鏃堕棿杩囧緱鐪熷揩锛屽啀杩?5鍒嗛挓灏辨槸涓嬪崐骞寸殑绗竴澶╀簡锛岀澶у涓嬪崐骞村紑涓ソ澶达紒鏈€鍚庯紝鎴戞槸AndyHu锛岀洰鍓嶆殏鏃舵槸涓€鍚嶅墠绔惉鐮栧伐绋嬪笀銆傛枃绔犲鏈夐敊璇紝娆㈣繋鍦ㄨ瘎璁哄尯鎸囨銆傚鏋滄湰鏂囧鎮ㄦ湁甯姪锛岃鐐硅禐鍏虫敞銆傛湭缁忚鍙姝㈣浆杞姐€傪煉屽皯璇达紝澶氬仛銆?/p>