MUI-底部Tabbar的实现

最新推荐文章于 2024-09-14 14:43:52 发布
最新推荐文章于 2024-09-14 14:43:52 发布
阅读量1k 收藏 27
点赞数 23
分类专栏： MUI 文章标签： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ydk1203/article/details/142219020
版权

底部Tabbar的实现

一、页面数量

假设Tabbar中有四个选项，即四个页面

那么所需要的Html文件分别为

main.html

page1.html

page2.html

page3.html

page4.html

其中，main.html用于放置子页面显示区域和Tabbar

点击不同Tabbar选项切换子页面实现Tabbar效果

二、分步实现

1. 在mui.init时，对子页面进行预加载并禁用左滑关闭

mui.init({
    switchBack: false, // 禁用左滑关闭
    preloadPages: [ // 预加载页面
        { url: 'home.html', id: 'home' },  // 第一个子页面
        { url: 'data.html', id: 'data' },  // 第二个子页面
        { url: 'news.html', id: 'news' },  // 第三个子页面
        { url: 'my.html', id: 'my' }  // 第四个子页面
    ],
    preloadLimit: 4 // 预加载的子页面窗口数量
});

2. 编写页面结构

注意！底部选项卡可以用字符mbar快速生成模板

<div id="main"></div><!-- 子页面显示区域 -->
<nav class="mui-bar mui-bar-tab"> <!-- Tabbar界面 -->
    <a class="mui-tab-item mui-active" id="home-tab"><!-- 第一个Tabbar选项 -->
        <span class="mui-icon mui-icon-home"></span><!-- Tabbar选项的图标 -->
        <span class="mui-tab-label">首页</span><!-- Tabbar选项的文本 -->
    </a>
    <a class="mui-tab-item" id="news-tab"><!-- 第二个Tabbar选项 -->
        <span class="mui-icon mui-icon-info"></span>
        <span class="mui-tab-label">新闻</span>
    </a>
    <a class="mui-tab-item" id="data-tab"><!-- 第三个Tabbar选项 -->
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">数据分析</span>
    </a>
    <a class="mui-tab-item" id="my-tab"><!-- 第四个Tabbar选项 -->
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">我的</span>
    </a>
</nav>

3. 编写子页面切换逻辑与菜单栏变化逻辑

注意：由于该内容需要用到plus，而在plus未加载完成时使用plus会产生错误，所以我们定义一个事件监听来监听plus是否准备完毕

function plusReady() {  // 当plus准备好时执行此函数
    var subpages = ['home.html', 'news.html', 'data.html', 'my.html'];  // 子页面文件名列表（按照选项顺序）
    var subpage_style = {  // 设置子页面样式
        top: '0px', // 子页面距离顶部的高度
        bottom: '50px' // 子页面距离底部菜单栏的高度
    };

    var activeTab = subpages[0]; // 默认激活的tab
    var main = plus.webview.currentWebview(); // 获取主窗口

    // 创建子页面并附加到主窗口
    for (var i = 0; i < subpages.length; i++) {
        var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
        if (i > 0) {  // i=0时是主页，i>0就不是主页
            sub.hide(); // 默认隐藏除首页之外的页面
        }
        main.append(sub);  // 子页面容器添加子页面
    }

    // 监听 tab 的点击事件
    mui('.mui-bar-tab').on('tap', 'a', function (e) {  // 选择了.mui-bar-tab中的a元素
        // e.preventDefault();

        var targetTab = this.getAttribute('id').replace('-tab', '') + '.html'; // 获取点击事件触发者的id，并将id中的-tab去除，然后与.html拼接

        if (targetTab == activeTab) {
            return; // 如果点击的是当前选中的tab，不做处理
        }

        // 隐藏当前页面，显示点击的页面
        plus.webview.show(targetTab);
        plus.webview.hide(activeTab);

        // 切换激活的tab
        activeTab = targetTab;

        // 更新底部菜单栏的激活状态
        var tabs = document.querySelectorAll('.mui-tab-item');
        for (var i = 0; i < tabs.length; i++) {  // 去除所有的菜单栏选项的激活状态
            tabs[i].classList.remove('mui-active');
        }
        this.classList.add('mui-active');  // this指向当前触发者，为其class列表添加mui-active类
    }, { passive: false });
}

if (window.plus) {
    plusReady();
} else {
    document.addEventListener('plusready', plusReady, false);  // 监听plusready事件，当plus准备好时执行plusReady函数
}

4. 完整代码实现与文件结构

main.html实现Tabbar代码如下：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="css/mui.css" rel="stylesheet" /> <!-- 这里是MUI的依赖 -->
</head>

<body>
    <script src="js/mui.js"></script> <!-- 这里是MUI的依赖 -->
    <script type="text/javascript">
        mui.init({
            switchBack: false, // 禁用左滑关闭
            preloadPages: [ // 预加载页面
                { url: 'home.html', id: 'home' },  // 第一个子页面
                { url: 'data.html', id: 'data' },  // 第二个子页面
                { url: 'news.html', id: 'news' },  // 第三个子页面
                { url: 'my.html', id: 'my' }  // 第四个子页面
            ],
            preloadLimit: 4 // 预加载的子页面窗口数量
        });
    </script>
    <div id="main"></div><!-- 子页面显示区域 -->
    <nav class="mui-bar mui-bar-tab"> <!-- Tabbar界面 -->
        <a class="mui-tab-item mui-active" id="home-tab"><!-- 第一个Tabbar选项 -->
            <span class="mui-icon mui-icon-home"></span><!-- Tabbar选项的图标 -->
            <span class="mui-tab-label">首页</span><!-- Tabbar选项的文本 -->
        </a>
        <a class="mui-tab-item" id="news-tab"><!-- 第二个Tabbar选项 -->
            <span class="mui-icon mui-icon-info"></span>
            <span class="mui-tab-label">新闻</span>
        </a>
        <a class="mui-tab-item" id="data-tab"><!-- 第三个Tabbar选项 -->
            <span class="mui-icon mui-icon-contact"></span>
            <span class="mui-tab-label">数据分析</span>
        </a>
        <a class="mui-tab-item" id="my-tab"><!-- 第四个Tabbar选项 -->
            <span class="mui-icon mui-icon-contact"></span>
            <span class="mui-tab-label">我的</span>
        </a>
    </nav>
    <script type="text/javascript">
        function plusReady() {  // 当plus准备好时执行此函数
            var subpages = ['home.html', 'news.html', 'data.html', 'my.html'];  // 子页面文件名列表（按照选项顺序）
            var subpage_style = {  // 设置子页面样式
                top: '0px', // 子页面距离顶部的高度
                bottom: '50px' // 子页面距离底部菜单栏的高度
            };

            var activeTab = subpages[0]; // 默认激活的tab
            var main = plus.webview.currentWebview(); // 获取主窗口

            // 创建子页面并附加到主窗口
            for (var i = 0; i < subpages.length; i++) {
                var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
                if (i > 0) {  // i=0时是主页，i>0就不是主页
                    sub.hide(); // 默认隐藏除首页之外的页面
                }
                main.append(sub);  // 子页面容器添加子页面
            }

            // 监听 tab 的点击事件
            mui('.mui-bar-tab').on('tap', 'a', function (e) {  // 选择了.mui-bar-tab中的a元素
                // e.preventDefault();

                var targetTab = this.getAttribute('id').replace('-tab', '') + '.html'; // 获取点击事件触发者的id，并将id中的-tab去除，然后与.html拼接

                if (targetTab == activeTab) {
                    return; // 如果点击的是当前选中的tab，不做处理
                }

                // 隐藏当前页面，显示点击的页面
                plus.webview.show(targetTab);
                plus.webview.hide(activeTab);

                // 切换激活的tab
                activeTab = targetTab;

                // 更新底部菜单栏的激活状态
                var tabs = document.querySelectorAll('.mui-tab-item');
                for (var i = 0; i < tabs.length; i++) {  // 去除所有的菜单栏选项的激活状态
                    tabs[i].classList.remove('mui-active');
                }
                this.classList.add('mui-active');  // this指向当前触发者，为其class列表添加mui-active类
            }, { passive: false });
        }

        if (window.plus) {
            plusReady();
        } else {
            document.addEventListener('plusready', plusReady, false);  // 监听plusready事件，当plus准备好时执行plusReady函数
        }
    </script>
</body>

</html>
GalaxyShines
关注
专栏目录
uniapp - [全端兼容] 高性能 tabbar 底部菜单凸起效果，原生系统自定义底部菜单不卡顿、切换页面不闪烁、自动缓存页面（底部菜单中间自定义一个图片并悬浮起来）
王佳斌
06-28 4705
uniapp如何实现底部凸起按钮，uniapp tabbar底部菜单怎么自定义，uniapp怎么让底部菜单中间突出来，uniapp自定义底部tabbar，uniapp高性能好用的底部菜单，uniapp自定义底部导航栏并解决闪烁问题，uniapp 怎么设置凸起的底部tabbar，uniapp怎么用系统的底部菜单 还想让中间的按钮凸起来，uniapp自定义tabbar性能不好怎么办，uni-app自定义导航栏实现中间凸起效果，uniapp底部导航栏中间圆形按钮凸起效果详细代码，uni-app自定义中间图标突起的
MUI实现底部选项卡
浪子四方
08-28 1089
引言 本小节以div的形式来模拟底部选项卡，该技巧适合设计业务比较简单的APP，如果业务复杂一点的话（比如需要下拉刷新、上拉加载等功能），那笔者还是推荐使用webview的形式来实现底部选项卡比较好。 实现效果 案例源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&...
MUI框架：移动端底部固定mui-bar-tab布局 - 案例篇
草巾冒小子的博客
05-14 8632
移动端布局：自定义MUI底部tabs选项卡（nav组件 · 底部固定mui-bar-tab） · 案例演示 效果图 html代码实例 · 如下： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>自定义MUI底部tabs选项卡</title&gt...
MUI tab-bar 进行页面跳转
goodtimedd的博客
07-07 1159
MUI组件化官网 选择底部选项卡进行快速搭建底部导航 <div class="mui-content"> <!--一, 子页面内容部分--> <div id="main-content"></div> <!--二, 底部选项卡--> <nav class="mui-bar mui-bar-tab" id="tabBar"> <a class="mui-tab-item m
mui tab bar 顶部+底部
热门推荐
kangkang_style的博客
02-26 1万+
底部选项卡+div模式        通过DIV模拟一个独立页面，通过DIV的显示、隐藏模拟不同页面的切换，典型的SPA模式；这种模式适合简单业务系统，因为每个选项卡内容要写在一个DIV中， 若逻辑复杂，会导致当前页面DOM结构繁杂，造成webview响应缓慢，甚至崩溃；因此若系统较复杂，需要下拉刷新等操作，推荐使用webview模式的选项卡；核心代码：&lt;nav class="mui-bar...
mui中如何使用tab来切换子页面 mui-bar， mui-bar-tab
weixin_30951743的博客
11-29 859
mui是前端框架但是很多人用它写移动端 那么mui底部切换是怎么做到的呢？ 如何点击某个tab来切换不同的页面？ 解答： 1首先我们需要引入mui框架的底部tab元素 代码如下 <!--table菜单开始--> <nav class="mui-bar mui-bar-tab"> <a href="index.html" ...
Mui、H5+开发APP小技巧①:点击底部导航切换界面
10-24
Mui提供了`mui-tabbar`组件，可以轻松创建底部导航栏。在HTML结构中，我们可以设置多个`mui-tab-item`，每个代表一个界面，点击时触发相应的事件。 ```html <div class="mui-tabbar"> <a href="#page1" class="mui...
mui原生底部选项卡实现（图片+文字）
Jordan666的博客
11-25 2686
manifest.json代码： “launchwebview”: { “bottom”: “0px”, “background”: “#fff”, “subNViews”: [ { “id”: “tabBar”, “styles”: { “bottom”: “0px”, “left”: “0”, “height”: “75px”, “width”: “100%”, “backgroundColo...
STM32学习笔记（二、初识stm32单片机）
tommorrowwill的博客
09-10 793
首先stm32是意法半导体公司（ST）使用ARM公司的Cortex-M为核心生产的32位的单片机。其中，ST---意法半导体公司，即SOC厂商。M---为Microelectronics的缩写，即微型处理器。32---表示控制器为32位的。103---表示F系列的子系列。
C++学习笔记----6、内存管理（五）---- 智能指针（3）
weixin_71738303的博客
09-11 1172
与指向特定类型的原始指针可以转化为不同类型的指针一样，shared_ptr保存特定的类型可以转化为一个另一种类型的shared_ptr。转化shared_ptr的函数是const_pointer_cast()，dynamic_pointer_cast(),static_pointer_cast()和reinterpret_pointer_cast()。前面简要提过，当拥有共享属主的智能指针，例如shared_ptr不在活动范围或者被重置时，只有它是最后指向的智能指针时才能释放其指向的资源。
UEFI学习笔记（五）：EDK II PCD的概念、类型、使用
qq_44189622的博客
09-11 840
如果在BIOS里面有一些模块是binary方式集成进来的而这些binary又需要用到PCD（用于Binary Release），那么这些Binary集成的要用到的PCD就必须要设置为。PCD的值存在memory里面，下次启动时，上次更改的值丢失了，每次启动都是从default值开始。是存在VPD空间的（在FLASH上，只读），一般是出厂配置。如果platform是从源码build出来的，没有binary在里面的时候，PCD用的都是。作用域在一个模块中（模块级的），可以在Binary Level进行修改。
OJ在线判题系统项目笔记
今天不coding的博客
09-11 783
OJ在线判题系统项目笔记
经验笔记：Web 浏览器存储手段
qq_45831414的博客
09-10 882
以上就是使用 IndexedDB 的基本步骤。IndexedDB 提供了强大的数据存储能力，并且可以通过索引来优化数据检索性能。在实际应用中，可能还需要处理更复杂的场景，比如数据迁移、错误处理等。务必确保你的代码能够妥善处理各种异常情况。
Netty笔记03-组件Channel
weixin_46425661的博客
09-12 777
本文主要讲解Netty中的组件Channel、ChannelFuture和CloseFuture
17、电科院FTU检测标准学习笔记-录波性能
最新发布
sixtome
09-14 567
作者简介：本人从事电力系统多年，岗位包含研发，测试，工程等，具有丰富的经验在配电自动化验收测试以及电科院测试中，本人全程参与，积累了不少现场的经验。
rk3568系统buildroot开发笔记
Reasonss的博客
09-11 1260
构建RK3568系统期间遇到的各种问题,我主要分为编译问题和运行问题
【学习笔记】SSL密码套件之哈希
Taki_UP的博客
09-12 1155
本篇介绍了TLS/SSL密码套件中常用的哈希算法，包括Poly1305、SHA384、SHA256、SHA、MD5
JS笔记
2201_76100326的博客
09-11 520
Math对象属于Javascript内置对象，无需实例化（不需要添加new ），可以直接使用。只有一个Math.PI的属性。
mui-tree-select
12-21
根据提供的引用内容，mui-tree-select是一个基于mui框架的树形选择组件。它可以让用户通过点击树形结构中的节点来选择相应的选项。当用户切换选中项时，会触发selected事件，并且可以通过事件参数（e.detail.el）获取当前选中的节点。 以下是一个示例代码，演示了如何使用mui-tree-select组件： ```html <div class="mui-tree-select"> <ul class="mui-table-view mui-table-view-radio"> <li class="mui-table-view-cell"> <a class="mui-navigate-right">节点1</a> <ul> <li class="mui-table-view-cell"> <a class="mui-navigate-right">子节点1</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">子节点2</a> </li> </ul> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">节点2</a> </li> </ul> </div> <script> var list = document.querySelector('.mui-table-view.mui-table-view-radio'); list.addEventListener('selected', function(e) { console.log("当前选中的为：" + e.detail.el.innerText); }); </script> ``` 在上面的示例中，我们创建了一个包含树形结构的mui-tree-select组件。当用户选择某个节点时，会触发selected事件，并通过事件参数e.detail.el获取当前选中的节点。在示例中，我们将选中节点的innerText打印到控制台上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GalaxyShines

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值