利用 Mui 底部導航欄實現跳轉頁面
歡迎點選「演算法與程式設計之美」↑關注我們！
本文首發於微信公眾號："演算法與程式設計之美"，歡迎關注，及時瞭解更多此係列文章。
1 問題描述
mui 是一款最接近原生的框架，對於會使用的人來說十分的便捷易操作，但對於像筆者這樣剛入門的小白可是十分的陌生和走了太多的彎路。
對於那些不懂的前端的人，或者是一些剛入門 html 的人，他們可能會認為有了框架不就很快能完成一個框架了嗎？其實不是這樣的，一個框架他也有自己的一些東西需要去摸索和深層次的理解。也就在這幾天遇到一個關於如何流暢的跳轉頁面的問題，看似簡單易解決，可是要較好的解決它，確實有點難度。
2 問題分析
想要進行頁面跳轉，一開始能想象到的很簡單， mui 專案是封裝了原生的 HTML5+ 的 API 的一個框架 呀，那麼 h5 能實現的 mui 框架裡面一定能實現撒，於是剛開始採用了 href 直接跳轉，顯然這是不行的。不斷摸索，不斷地走彎路，最後終於找到了，目前對於本人來說較好地方式，也就是採用 mui 封裝的 openWindow 函式。
3 解決方案
首先是簡單的進行頁面切換實現
以下程式碼是利用 mui 的框架打出來底部標籤欄框架。
該程式碼塊呈現在手機端的頁面裡，僅能支援點選時和點選後的字型和圖示的換色，並不會對頁面進行切換。而想要實現整個頁面的切換，在這個國慶裡，筆者對其進行了初步的研究。初步認為有三種實現該效果的方式。
方式一之頁面切換：利用 a 標籤中的 href 屬性直接進行跳轉
利用 mui 進行 app 開發， mui 是一個基於 h5+ 的前端框架，因此使用 href 屬性值直接進行跳轉還是可以的，不過在移動端點選會出現白屏閃動的現象，對於使用者的體驗是極度不好，也不像一個 app 樣子。
程式碼如下：
注意： mui 框架遮蔽了 onclick 和 href 事件。
解決方法：繫結 tab 使用 js 跳轉。
方式二之頁面切換：利用 a 標籤中的 href 屬性間接進行跳轉
第二種方式與第一種方式一樣，不流暢，沒有充分利用 mui 的特性和優點，實際使用者體驗度也十分不好。
方式三之頁面切換：為 a 標籤 id 屬性賦值，進行頁面跳轉
第三種方式是利用 mui 所封裝的函式進行跳轉，從前兩方式到第三種有明顯的差距，第三種是不會出現人和閃屏和等待延遲。
以上所述，實現了一個簡單的頁面切換，但並沒有利用 webView 模組管理應用視窗介面，實現多視窗的邏輯控制管理。
什麼是視窗？
就如上圖所示，整個軟體（也就是這個圖片所呈現的整體）就是一個視窗。左側紅框內的東西是固定不變的，每點選不同的選項卡，右側紅框內呈現不同的頁面，也就是不同的 webView ，而我們通過不同的 webView 的切換來控制瀏覽不同選項卡里的內容。
因此可以將 html 想象成一個一個的視窗，一個 html 頁面可以有多個 webView ， h5+ 的 webView 是對原生 webView 的封裝，利用 js 進行呼叫，因此它的執行環境是 app ，在進行專案的除錯時，也需要利用移動端進行點選，修改後重啟才生效等等。
如何實現？
針對標題所述利用底部導航欄實現頁面跳轉的解決，我們可以採用將底部導航欄單獨寫入一個 html 內，再續寫四個子頁面，通過監聽的方法進行呼叫某個子頁面
4 總結
想要學好和利用好一個框架，並不能簡簡單單的去使用它，而更應該深層次的感受它的魅力，這才是重中之重。如果只侷限於實現，這並不能提高自己的技術，反而之將自己塑造成了一個搬磚的碼農。
更多精彩文章：
ofollow,noindex"> 什麼是機器學習
3604f3201&scene=21#wechat_redirect" target="_blank" rel="nofollow,noindex"> Tomcat原始碼分析之 doGet方法(四)
where2go 團隊
微訊號：演算法與程式設計之美
長按識別二維碼關注我們!
溫馨提示： 點選頁面右下角 “寫留言” 發表評論，期待您的參與！期待您的轉發！