自定義微信小程序tabBar+權(quán)限管理+頁(yè)面跳轉(zhuǎn)不刷新

一.需求

? ?1.tabBar在實(shí)際的項(xiàng)目中,被UI要求字體大小為20rpx，而微信自帶的是24rpx

? ? 2.tabBar加上了權(quán)限管理（只有會(huì)員才可以看到專屬的tabBar入口）

? ? 3.tabBar點(diǎn)擊后，如果是同樣的tabBar禁止重新加載數(shù)據(jù)

? ? 4.tabBar對(duì)應(yīng)的頁(yè)面要有緩存（也就是跳轉(zhuǎn)不刷新）

二.實(shí)現(xiàn)思路

? ? 1.把所有的tabBar頁(yè)面寫在一個(gè)頁(yè)面，使用Swiper+scroll-view實(shí)現(xiàn)，balabalabalala~~

? ? 2.使用switchTab的跳轉(zhuǎn)方式緩存頁(yè)面

? ? 結(jié)果：因?yàn)橐婚_(kāi)始項(xiàng)目就采用了4個(gè)頁(yè)面的方式，所以只能填坑選擇了第二種

三.實(shí)現(xiàn)方法

? ? 1.自定義tabBar（我使用了組件的方式）

tabBar代碼

?解析：使用navigator標(biāo)簽進(jìn)行頁(yè)面跳轉(zhuǎn)，防止左上角的左返回按鈕出現(xiàn)。open-type是跳轉(zhuǎn)方式，hover-class是指定點(diǎn)擊時(shí)的樣式，使用tabStatu和每一個(gè)數(shù)組的current相比較來(lái)實(shí)現(xiàn)是否點(diǎn)擊的是當(dāng)項(xiàng)，如果是就隱藏navigator，顯示block禁止同一個(gè)按鈕的多次點(diǎn)擊。image的標(biāo)簽也是通過(guò)當(dāng)前點(diǎn)擊項(xiàng)的tabStute來(lái)判斷顯示的是哪一張圖片。

tabBarj的son（普通用戶）

? ?

根據(jù)身份添加會(huì)員的權(quán)限

2.實(shí)現(xiàn)跳轉(zhuǎn)時(shí)就遇到了switchTab根本不管用啊，怎么跳轉(zhuǎn)不了捏~

? ? 排查：wx.switchTab({url:'地址'})的官方說(shuō)明地址必須是在app.json的tabBar中注冊(cè)的。

? ? 那就去注冊(cè)吧

app.json中注冊(cè)tabBar

這樣的寫法是為了防止加載時(shí)出現(xiàn)文字，圖片的信息

但是又遇到了問(wèn)題，自定義的tabbar出現(xiàn)在app.json的tabBar上方，別著急，在app.js中使用wx.wx.hideTabBar(),隱藏掉就好了。哈哈。大功告成。

如果你有更好的方法，可以告訴我哦~