mui 选项卡与header文字同步

最新推荐文章于 2024-07-08 16:22:29 发布
最新推荐文章于 2024-07-08 16:22:29 发布
阅读量275 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/DCL1314/p/9107048.html
版权

mui底部tab固定 头部nav可变

1201653-20180529185715021-1689774366.png

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="../../css/mui.min.css">
    <style>
        html,
        body {
            background-color: #efeff4;
        }
        /*解决: Unable to preventDefault inside passive event listener due to target being treated as passive. */
        * { touch-action: none; } 
    </style>
</head>

<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 id="title" class="mui-title">首页</h1>
    </header>
    <nav class="mui-bar mui-bar-tab">
        <a id="defaultTab" class="mui-tab-item mui-active" href="tab-webview-subpage-about.html">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item" href="tab-webview-subpage-chat.html">
            <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
            <span class="mui-tab-label">消息</span>
        </a>
        <a class="mui-tab-item" href="tab-webview-subpage-contact.html">
            <span class="mui-icon mui-icon-contact"></span>
            <span class="mui-tab-label">通讯录</span>
        </a>
        <a class="mui-tab-item" href="tab-webview-subpage-setting.html">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">设置</span>
        </a>
    </nav>
    <script src="../../js/mui.min.js"></script>
    <script type="text/javascript" charset="utf-8">
         //mui初始化
        mui.init();
        var subpages = ['tab-webview-subpage-about.html', 'tab-webview-subpage-chat.html', 'tab-webview-subpage-contact.html', 'tab-webview-subpage-setting.html'];
        var subpage_style = {
            top: '45px',
            bottom: '51px'
        };
        
        var aniShow = {};
        
         //创建子页面，首个选项卡页面显示，其它均隐藏；
        mui.plusReady(function() {
            var self = plus.webview.currentWebview();
            for (var i = 0; i < 4; i++) {
                var temp = {};
                var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
                if (i > 0) {
                    sub.hide();
                }else{
                    temp[subpages[i]] = "true";
                    mui.extend(aniShow,temp);
                }
                self.append(sub);
            }
        });
         //当前激活选项
        var activeTab = subpages[0];
        var title = document.getElementById("title");
         //选项卡点击事件
        mui('.mui-bar-tab').on('tap', 'a', function(e) {
            var targetTab = this.getAttribute('href');
            if (targetTab == activeTab) {
                return;
            }
            //更换标题
            title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
                    try{
            //显示目标选项卡
            //若为iOS平台或非首次显示，则直接显示
            if(mui.os.ios||aniShow[targetTab]){
                plus.webview.show(targetTab);
            }else{
                //否则，使用fade-in动画，且保存变量
                var temp = {};
                temp[targetTab] = "true";
                mui.extend(aniShow,temp);
                plus.webview.show(targetTab,"fade-in",300);
            }
            //隐藏当前;
            plus.webview.hide(activeTab);
                   }catch(e){}
            //更改当前活跃的选项卡
            activeTab = targetTab;
        });
         //自定义事件，模拟点击“首页选项卡”
        document.addEventListener('gohome', function() {
            var defaultTab = document.getElementById("defaultTab");
            //模拟首页点击
            mui.trigger(defaultTab, 'tap');
            //切换选项卡高亮
            var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
            if (defaultTab !== current) {
                current.classList.remove('mui-active');
                defaultTab.classList.add('mui-active');
            }
        });
    </script>
</body>

</html>

原文 https://github.com/dcloudio/mui/blob/master/examples/hello-mui/examples/tab-webview-main.html

mui中用vue实现[webAPP项目]基于MUI框架webAPP之头部导航与底部导航制作

1201653-20180530115745189-672443534.png

<!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.min.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="../../fonts/iconfont.css">
        <style>
            [v-cloak] {
                display: none !important;
            }
            /*解决: Unable to preventDefault inside passive event listener due to target being treated as passive. */
            
            * {
                touch-action: none;
            }
        </style>
    </head>

    <body>
        <div id="index" v-cloak>
            <header class="mui-bar mui-bar-nav">
                <span class="mui-icon mui-pull-right iconfont icon-kefu"></span>
                <h1 class="mui-title" id="title">{{title}}</h1>
            </header>
            <nav class="mui-bar mui-bar-tab">
                <a id="defaultTab" class="mui-tab-item mui-active" href="home.html">
                    <span class="mui-icon iconfont icon-shouye"></span>
                    <span class="mui-tab-label">首页</span>
                </a>
                <a class="mui-tab-item" href="shop.html">
                    <span class="mui-icon iconfont icon-shangcheng"></span>
                    <span class="mui-tab-label">商城</span>
                </a>
                <a class="mui-tab-item" href="task.html">
                    <span class="mui-icon iconfont icon-renwu"></span>
                    <span class="mui-tab-label">任务</span>
                </a>
                <a class="mui-tab-item" href="message.html">
                    <span class="mui-icon iconfont icon-xiaoxi"></span>
                    <span class="mui-tab-label">消息</span>
                </a>
                <a class="mui-tab-item" href="mine.html">
                    <span class="mui-icon iconfont icon-wo"></span>
                    <span class="mui-tab-label">我</span>
                </a>
            </nav>
        </div>
        <script src="../../js/mui.js"></script>
        <script src="../../js/vue.js"></script>
        <script type="text/javascript">
            (function(mui, Vue) {
                var index = new Vue({
                    el: '#index',
                    data: {
                        title: '首页'
                    },
                    mounted: function() {
                        var _this = this;
                        var subpages = ['home.html', 'shop.html', 'task.html', 'message.html', 'mine.html'];
                        var subpage_style = {
                            top: '45px',
                            bottom: '51px'
                        };
                        var aniShow = {};
                        //创建子页面，单个选项卡页面显示，其他均隐藏
                        mui.plusReady(function() {
                            //获取当前页面对象
                            var self = plus.webview.currentWebview();
                            for(var i = 0; i < subpages.length; i++) {
                                var temp = {};
                                //创建页面
                                var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
                                if(i > 0) {
                                    sub.hide(); //隐藏页面
                                } else {
                                    //加载完成后关闭首页加载动画
                                    temp[subpages[i]] = 'true';
                                    mui.extend(aniShow, temp);
                                }
                                self.append(sub); //将webview对象填充到窗口的方法
                            }
                        })
                        //当前激活选项
                        var activeTab = subpages[0];
                        var title = document.getElementById('title');
                        mui(".mui-bar-tab").on('tap', 'a', function(e) {
                            var targetTab = this.getAttribute('href'); //获取页面href
                            //更换标题
                            _this.title = this.querySelector('.mui-tab-label').innerHTML;
                            if(targetTab == activeTab) {
                                return;
                            }
                            try {
                                //显示目标选项卡
                                //若为iOS平台或非首次显示，则直接显示
                                if(mui.os.ios || aniShow[targetTab]) {
                                    plus.webview.show(targetTab);
                                } else {
                                    //否则，使用fade-in动画，且保存变量
                                    var temp = {};
                                    temp[targetTab] = "true";
                                    mui.extend(aniShow, temp);
                                    plus.webview.show(targetTab, "fade-in", 300);
                                }
                                //                      plus.webview.show(targetTab);//显示点击webview
                                plus.webview.hide(activeTab); //隐藏当前webview;
                            } catch(e) {

                            }
                            //更改当前活跃的选项卡
                            activeTab = targetTab;
                        })

                        //自定义事件，模拟点击“首页选项卡”
                        document.addEventListener('gohome', function(e) {
                            console.log(e)
                            var defaultTab = document.getElementById("defaultTab");
                            //模拟首页点击
                            mui.trigger(defaultTab, 'tap');
                            //切换选项卡高亮
                            var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
                            if(defaultTab !== current) {
                                current.classList.remove('mui-active');
                                defaultTab.classList.add('mui-active');
                            }
                        });

                    }
                })
            })(mui, Vue)
        </script>
    </body>

</html>

转载于:https://www.cnblogs.com/DCL1314/p/9107048.html

weixin_30675967
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
mui上拉加载+选项卡+ajax
12-25
本示例中，我们关注的是`mui`框架结合上拉加载、选项卡以及`ajax`技术的使用，这些都是创建交互式、数据驱动的H5页面的关键组件。 首先，`mui`框架提供了丰富的组件和API，使得开发者能够轻松实现滑动、下拉刷新、...
mui选项卡切换和下拉刷新加载数据列表代码.zip
07-11
这是一款基于mui框架制作的选项卡切换和下拉刷新加载数据列表代码，手机移动端选项卡切换插件，触屏滑动下拉刷新代码。 js代码 [removed][removed] [removed][removed] [removed][removed] [removed] mui....
MUI 列表组件：文字居左中右（排版） - 代码篇
草巾冒小子的博客
05-27 5142
MUI 列表组件：文字居 - 代码篇 .mui-text-left类，控制list；列表的文字居中排布问题。 代码如下： <ul class="mui-table-view mui-table-view-radio font-pay mui-text-left" style="margin-top: 0;"> <li class="mui-table-view-cell p...
MUI 启用沉浸式&header显示问题
Asion的博客
09-28 4299
启用沉浸式 在manifest.json配置文件中添加如下代码（两种方式皆可） a、 "plus": { "statusbar": { "immersed": "supportedDevice", "style": "dark" }, b、 "plus": { "statusbar": { "immers
MUI框架中实现附近搜索功能
qq_24343389的博客
05-26 929
body, html, #allmap { width: 100%; height: 100%; margin: 0; font-family: "微软雅黑"; } .mui-content { position: relative; } #l-map { height: 300px; width: 100%; } #r-result { overflo
定制页面
Rosa_zz的博客
05-27 898
内置页面的定制 ”现代用户界面“中提供了一些页面，您可以通过插入宏的指令（如：!insertmacro MUI_PAGE_COMPONENTS）来把相应的页面加入到安装脚本，在安装过程中，插入的页面将按照先后顺序出现，这些提供的安装页面如下： MUI_PAGE_WELCOME MUI_PAGE_LICENSEtextfile MUI_PAGE_COMPONENTS MUI_PAGE_DIRECTORY MUI_PAGE_STARTMENUpageid variable MUI_PAGE_INST...
mui 头部跟底部导航
月落星河
09-11 1995
在使用mui框架的时候，为头部和底部导航包裹个div 要不会造成你写的会上去。
MUI选项卡下拉刷新上拉加载demo
12-10
**MUI选项卡下拉刷新上拉加载Demo详解** 在移动应用开发中，为了提供流畅且高效的用户体验，上拉刷新和下拉加载已经成为必不可少的功能。MUI（Mobile UI）是DCloud公司推出的一款轻量级的前端框架，专门用于构建高...
mui选项卡切换与下拉刷新加载数据列表代码.zip
07-11
var deceleration = mui.os.ios?0.003:0.0009; $('.mui-scroll-wrapper').scroll({ bounce: false, indicators: true, //是否显示滚动条 deceleration:deceleration }); $.ready(function() {
MUI顶部选项卡的用法(tab-top-webview-main)详解
11-28
　MUI是一款最接近原生APP体验的高性能前端框架，它的比较重要的功能是：下拉刷新、侧滑导航、滑动触发操作菜单和顶部(底部)选项卡等 最近用MUI做手机app应用的时候，遇到的小bug。顺便研究了一下这个tab-top-...
mui开发实战
07-31
mui框架webapp开发实例代码。适合初步开发者学习和熟悉整个mui框架
tab选项卡切换效果，tab选项卡内容宽度自适应
08-21
C:\Users\jouel\Desktop\tab选项卡切换效果，tab选项卡内容宽度自适应
mui 固定头部，加载子页
云上人间钦自赏
04-14 6648
mui.init({ swipeBack: false, subpages: [{ id: 'qrcode_body', url: 'qrcode_body.html', styles: { top: '50px', bottom: 0, bounce: 'vertical' }, extras: { plid: $("#hdp
HBuilder MUI 顶部标题栏一直显示"首页"的问题
你好邱林和的专栏
01-29 1万+
在运行MUI的例子的时候,我发现在浏览器是能看到每个页面的标题切换,但是在手机上一直显示首页,这个有点奇怪,如下图:     后来 发现manifest.json有一个配置,是固定标题,默认为44px,     "plus": { "launchwebview": {//需要注释掉这段,就可以显示正常的标题了 "titleNView": { "backgroundco
商品评论、点赞、收藏、分享转发、浏览记录功能
weixin_33711641的博客
05-15 4794
收藏： http://www.chinaz.com/manage/2017/0816/796691.shtml（详细的介绍） https://blog.csdn.net/qq_38797181/article/details/72725198 评论： https://blog.csdn.net/ztchun/article/details/71106117（详细文章） https://blog.c...
Hbuider hybrid app开发细节积累
千里马的专栏
09-28 5978
1. 搜索框的属性的设置。要虚拟键盘显示“搜索”二字，需满足以下两个条件： （1）设置input属性 type=‘search’ （2）input需在form表单中。 html代码<form action=""> <div class="mui-input-row mui-search"> <input id="search" type="search" class="mui
MUI-首页tab选项卡切换功能
热门推荐
dududu01的专栏
09-25 2万+
测试subpage html, body { background-color: #efeff4; } 库存 库存 个人中心 设置 //mui初始化 mui.init({ swipeBack: false }); var menu = null, m
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
最新发布
Vinca@的博客
07-08 850
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
mui底部选项卡实现跳转
07-13
在实现 MUI 底部选项卡的跳转功能时，可以使用 `<BottomNavigation>` 和 `<BottomNavigationAction>` 组件来创建底部导航栏和选项卡。 首先，你需要导入相关的组件： ```jsx import React, { useState } from 'react'; import { BottomNavigation, BottomNavigationAction } from '@mui/material'; import { Home, Explore, Favorite } from '@mui/icons-material'; ``` 然后，你可以创建一个函数组件，并在组件中添加底部导航栏和选项卡的代码： ```jsx function BottomTabs() { const [value, setValue] = useState(0); // 用于保存当前选中的选项卡索引 const handleTabChange = (event, newValue) => { setValue(newValue); // 更新选中的选项卡索引 }; return ( <BottomNavigation value={value} onChange={handleTabChange}> <BottomNavigationAction label="Home" icon={<Home />} /> <BottomNavigationAction label="Explore" icon={<Explore />} /> <BottomNavigationAction label="Favorite" icon={<Favorite />} /> </BottomNavigation> ); } ``` 在上面的代码中，我们使用 `useState` 钩子来创建一个名为 `value` 的状态变量，用于保存当前选中的选项卡索引。`handleTabChange` 函数用于处理选项卡变动事件，并更新 `value` 的值。 最后，将 `BottomTabs` 组件添加到你的页面中即可： ```jsx function App() { return ( <div> {/* 其他内容 */} <BottomTabs /> </div> ); } ``` 这样，你就实现了 MUI 底部选项卡的跳转功能。当用户点击不同的选项卡时，会触发 `handleTabChange` 函数，并更新 `value` 的值，从而实现页面的跳转效果。你可以根据自己的需求，在每个选项卡的 `onClick` 事件中添加相应的跳转逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值