一个 mui 底部选择卡切换的简化实现方案

网上有不少底部选择卡切换的解决方案,看了官方的和网上的资料之后做了一些简化。

这部分是 index.html 的主要代码,我将 index.html 作为主页面,然后创建他的三个子页面。主页面只包含网页基本骨架,比如顶部和底部选择卡。代表三个选择卡的子页面显示具体内容。

具体原理 :在打开 app 时,会首先加载 index.html 页面,运行到 js 代码时,同时创建好三个选择卡的页面,但是刚开始只显示首页的选择卡,隐藏另外两个选择卡。同时绑定选择卡的点击事件,如果触发了切换操作,那么隐藏当前页面,显示触发后的页面。

首先是 HTML 代码部分,创建了 头部底部选择栏,底部选择栏包含三个选择卡:首页(home.html)、交流(chat.html)、设置(setting.html)。