相信有很多學習uni的小伙伴，做專案的時候或許會遇到跟我一樣的需要自定義tab和導航欄的需求。或許你們有了辦法，如果沒有的話往下看，字不多！
做專案時候會不會遇到TabBar中間凸起按鈕的實作，我經過很多方法去實踐。h5可以用層級覆寫，APP可以用5+自己提供的方法，但是我感徑訓是不太穩定，決定去自定義。
1 首先將全域的導航欄樣式和TabBar去掉。
2 開始一定義導航欄，根據uni的獲取不同機型的頂部指示框來對不同的機型做兼容性，即設定個頂部padding。
3 底部TabBar的實作可能費腦子了，由于uni不支持在APP.vue中寫東西，所以笨想法就是要是在不同的主頁都設定TabBar來還原，但是這樣效果會大大的折扣，沒有原生的好，那么該如何解決呢？
4 我的解決思路就是創造一個APP.vue檔案來解決！
5 當然不要與哪個APP重名，所以這時候我們要另外起個名字，我這里叫做index.vue，并將這一項寫在pages.json中第一位(啟動項)。
6這樣每次APP啟動都會到這一頁面，相信此時你心中有了清晰的思路了吧，然后就是在這個頁面內寫入需要的導航條和TabBar。
7 為了讓代碼表現清晰，如果我們需要TabBar跳轉4個頁面，那么我們創建4頁面，并全域組件組件，當然區域也可以的！然后在這個頁面寫進去
8 手機寫的這個東西，能力有限，我這有寫的樣板，可以去參考下
百度網盤 鏈接:https://pan.baidu.com/s/18lr7YQmGYsfBJsmyOebVow 提取碼:8524
uj5u.com熱心網友回復：
請問可以請教幾個問題嗎?能要個聯系方式么~uj5u.com熱心網友回復：
uni-app自定義仿微信、淘寶頂部導航欄，支持背景漸變、字體圖示、圖片、搜索框、圓點提示https://blog.csdn.net/yanxinyun1990/article/details/100919657
uj5u.com熱心網友回復：
謝謝分享。記得結帖。
uj5u.com熱心網友回復：
分享不存在了，可以分享嗎轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/245465.html
標籤：JavaScript