mui实现底部导航栏页面切换

灰太狼 2022-04-23 06:12 767阅读 0赞

# 1 问题描述 #

mui是一款最接近原生的框架，对于会使用的人来说十分的便捷易操作，但对于像笔者这样刚入门的小白可是十分的陌生和走了太多的弯路。

对于那些不懂的前端的人，或者是一些刚入门html的人，他们可能会认为有了框架不就很快能完成一个框架了吗？其实不是这样的，一个框架他也有自己的一些东西需要去摸索和深层次的理解。也就在这几天遇到一个关于如何流畅的跳转页面的问题，看似简单易解决，可是要较好的解决它，确实有点难度。

# 2 问题分析 #

想要进行页面跳转，一开始能想象到的很简单，mui项目是封装了原生的HTML5+的API的一个框架呀，那么h5能实现的mui框架里面一定能实现撒，于是刚开始采用了href直接跳转，显然这是不行的。不断摸索，不断地走弯路，最后终于找到了，目前对于本人来说较好地方式，也就是采用mui封装的openWindow函数。

# 3 解决方案 #

首先是简单的进行页面切换实现

以下代码是利用mui的框架打出来底部标签栏框架。

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1][]

该代码块呈现在手机端的页面里，仅能支持点击时和点击后的字体和图标的换色，并不会对页面进行切换。而想要实现整个页面的切换，在这个国庆里，笔者对其进行了初步的研究。初步认为有三种实现该效果的方式。

方式一之页面切换：利用a标签中的href属性直接进行跳转

利用mui进行app开发，mui是一个基于h5+的前端框架，因此使用href属性值直接进行跳转还是可以的，不过在移动端点击会出现白屏闪动的现象，对于用户的体验是极度不好，也不像一个app样子。

代码如下：

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1 1][]

注意：mui框架屏蔽了onclick和href事件。

解决方法：绑定tab使用js跳转。

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1 2][]

方式二之页面切换：利用a标签中的href属性间接进行跳转

第二种方式与第一种方式一样，不流畅，没有充分利用mui的特性和优点，实际用户体验度也十分不好。

![640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1][]

方式三之页面切换：为a标签id属性赋值，进行页面跳转

第三种方式是利用mui所封装的函数进行跳转，从前两方式到第三种有明显的差距，第三种是不会出现人和闪屏和等待延迟。

![640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1 1][]

以上所述，实现了一个简单的页面切换，但并没有利用webView模块管理应用窗口界面，实现多窗口的逻辑控制管理。

什么是窗口？

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1 3][]

就如上图所示，整个软件（也就是这个图片所呈现的整体）就是一个窗口。左侧红框内的东西是固定不变的，每点击不同的选项卡，右侧红框内呈现不同的页面，也就是不同的webView，而我们通过不同的webView的切换来控制浏览不同选项卡里的内容。

因此可以将html想象成一个一个的窗口，一个html页面可以有多个webView，h5+的webView是对原生webView的封装，利用js进行调用，因此它的运行环境是app，在进行项目的调试时，也需要利用移动端进行点击，修改后重启才生效等等。

如何实现？

针对标题所述利用底部导航栏实现页面跳转的解决，我们可以采用将底部导航栏单独写入一个html内，再续写四个子页面，通过监听的方法进行调用某个子页面

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1 4][]

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1 5][]

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1 6][]

# 4 总结 #

想要学好和利用好一个框架，并不能简简单单的去使用它，而更应该深层次的感受它的魅力，这才是重中之重。如果只局限于实现，这并不能提高自己的技术，反而之将自己塑造成了一个搬砖的码农。

[640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1]: /images/20220323/7335332b7c0d4844ba32ccc7909d9eb2.png
[640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1 1]: /images/20220323/f991d7edf2b44cc187367b78b77da591.png
[640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1 2]: /images/20220323/f2429f384e0f4ef79c35b37aa088c373.png
[640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1]: /images/20220323/c2608b8097a94e6b95375ff1c2bae8e6.png
[640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1 1]: /images/20220323/c50dfdaeec574b05a178cc435aeffd6c.png
[640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1 3]: /images/20220323/09b1619f5294457587d2a9cdbf745565.png
[640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1 4]: /images/20220323/39e35e28568f49a9b6fd1c2f0537258e.png
[640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1 5]: /images/20220323/20d1f38a2c9440889af400bd55f6b5fd.png
[640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1 6]: /images/20220323/3c1f52dda50e4af5bf5d6efb0ba3dc64.png