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 总结

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

mui实现底部导航栏页面切换相关推荐

Android 底部导航栏+页面切换
lzyprime 博客 (github) 更新时间: 2020.12.21 创建时间:2020.11.25 qq及邮箱:2383518170 kotlin & android 笔记更新 20 ...
php点击切换图片的底部导航,如何优雅地使用BottomNavigationView实现底部导航栏+fragment切换效果...
BottomNavigationView.jpeg 引言之前总是使用RadioButton+ViewPager来实现底部导航栏+fragment切换效果,总是繁琐地还需要写ViewPager的适配器 ...
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )
文章目录一.BottomNavigationBar 底部导航栏二.PageView 滑动页面三.BottomNavigationBar 与 PageView 关联四.完整代码示例 1.核心导航 ...
mui实现底部导航栏
话不多说,先来看看实现的效果. 实现效果点击哪个选项卡,对应的选项卡就激活,其余的变为未激活状态,并且切换到对应的页面. 实现代码 mui的底部标签栏代码,可以自定义选项卡的图标和文字. <n ...
html导航栏页面切换的js,js实现页面滚动切换导航栏/点击导航栏跳转到指定位置...
最近一直在弄页面的事情,对页面方面的知识又巩固了一下.这次的内容如题,大家对代码有疑问或者是有更好的方法欢迎留言! js部分 //标题对象 var title = document.getElemen ...
html底部导航栏图标切换,【微信小程序】自定义底部导航栏，切换不同页面显示不同tabbar...
https://blog.csdn.net/small_lack/article/details/80959278 在一个微信小程序中想要用到两种不同的tabbar样式,需要在app.js中自定义,在 ...
微信小程序使用weui自定义底部导航栏，切换不同页面显示不同tabbar
在一个微信小程序中想要用到两种不同的tabbar样式,可以使用微信小程序自带插件tabbar 首先在页面json文件中引入 tabbar {"navigationBarTitleText&q ...
Flutter学习日记之底部导航栏BottomNavigationBar组件的使用
本文地址:https://blog.csdn.net/qq_40785165/article/details/116953235,转载需附上此地址大家好,我是小黑,一个还没秃头的程序员~~~ 空袋子 ...
Android studio实现底部导航,AndroidStudio制作底部导航栏以及用Fragment实现切换功能...
前言大家好,我是 Vic,今天给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述,希望你们喜欢学习目标 AndroidStudio制作底部导航栏以及用Fra ...

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

1 问题描述

2 问题分析

3 解决方案

4 总结

mui实现底部导航栏页面切换相关推荐

最新文章

热门文章