Hbuilder底部导航条

最新推荐文章于 2022-11-28 22:20:18 发布
最新推荐文章于 2022-11-28 22:20:18 发布
阅读量1.3k 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44567078/article/details/106672568
版权

 

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title></title>

    <script src="js/mui.min.js"></script>

    <script src="js/login.js"></script>

    <link href="css/mui.min.css" rel="stylesheet"/>

    

</head>

<body>

<nav class="mui-bar mui-bar-tab" id="nav">

<a id="tab_home" class="mui-tab-item mui-active" >

<span class="mui-icon mui-icon-home" ></span>

<span class="mui-tab-label">首页</span>

</a>

<a id="tab_message" class="mui-tab-item">

<span class="mui-icon mui-icon-email"></span>

<span class="mui-tab-label">消息</span>

</a>

<a id="tab_contact" class="mui-tab-item">

<span class="mui-icon mui-icon-contact"></span>

<span class="mui-tab-label">通讯录</span>

</a>

<a id="tab_setting" class="mui-tab-item" >

<span class="mui-icon mui-icon-gear"></span>

<span class="mui-tab-label">设置</span>

</a>

</nav>

 

<script type="text/javascript" charset="utf-8">

       mui.init({

       subpages:[//首先加载首页  

                        {  

                            url:'html/home.html',  

                            id:'tab_home',  

                            styles:{  

                                top:'0px',  

                                bottom:'60px'  

                            }  

                        }  

                    ],  

            preloadPages:[//预加载其他页面  

                {  

                    url:'html/message.html',  

                    id:'tab_message',  

                    styles:{

                top:'0px',

                bottom:'60px'  

                    }  

                },  

                {  

                url:'html/contact.html',  

                id:'tab_contact',  

                styles:{  

                    top:'0px',  

                    bottom:'60px'  

                }  

                },

                {

                 url:'html/setting.html',

                 id:'tab_setting',

                 styles:{

                 top:'0px',

                 bottom:'60px'

                 }

                }

            ]

       });

       mui.plusReady(function(){

       var tab_home,tab_message,tab_contact  

                mui("#nav").on("tap","#tab_home",function(){//点击触发   

                    tab_home=plus.webview.getWebviewById("tab_home");  

                    tab_home.show()  

                    tab_message.hide()

                    tab_contact.hide()

                    tab_setting.hide()

                })  

                mui("#nav").on("tap","#tab_message",function(){//点击触发  

                    tab_message=plus.webview.getWebviewById("tab_message");  

                    tab_message.show()  

                      

                })  

                mui("#nav").on("tap","#tab_contact",function(){//点击触发  

                    tab_contact=plus.webview.getWebviewById("tab_contact");  

                    tab_contact.show()  

                      

                })  

                mui("#nav").on("tap","#tab_setting",function(){//点击触发  

                 tab_setting=plus.webview.getWebviewById("tab_setting");

                 tab_setting.show()

                })

       })

      

    </script>

 

</body>

</html>

我们来看一下上边的代码，底部导航条标签<nav>以及class属性这些没啥好说的，记住就行了，我们主要看mui中的函数。

首先是mui.init()，mui框架将很多的功能配置都集中在mui.init()中，如果我们要使用某项功能，只需要在init中配置对应的参数即可，目前支持在init中配置的功能包括：创建子页面、预加载、手势事件配置、上拉加载、下拉刷新、关闭页面、设置系统状态栏背景颜色。如上代码所示，我们在init方法中配置了subpages:[{...}]（创建子页面）、preloadPages:[{...}]（预加载）。

Aenm
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Hbuilder x | mui底部导航栏
小王正在学代码的博客
08-24 1993
Hbuilder X | mui底部导航栏
【学习笔记】HBuilder状态栏隐藏显示及颜色
个性小资的博客
01-06 2万+
最近在看HBuilder文档时针对顶部状态栏如何隐藏/显示及如何设定颜色有一些疑问，也看了不少人问得问题和解答，总结出来几个方法，和大家分享下默认的含mui的html文件都会包含<script type="text/javascript" charset="utf-8"> mui.init(); </script>设置系统状态栏背景颜色（iOS7及以上生效）mui.init()方法是用来初始
hbuilderWA2打包app屏蔽默认导航栏(返回键)
行走的卡路里
04-15 1623
{//未适配的公共页面，可拦截原生下载和头部导航栏, 注：通配符的规则 放在最后一个节点才能达到适配所有未适配的公共页面效果，适配规则优先级为自上而下查找匹配规则 "webviewId": "common", "matchUrls": [ { ...
【项目难点】在HbuilderX中为小程序配置底部导航栏
SDUzzy的博客
06-30 3666
1、首先区分什么是tabBar页面，什么是普通页面，注册成tabBar页面后将不能使用uni.navigateTo的api，需要使用switchTab的api进行跳转。tabBar页面都会显示下方的导航栏，如果需要隐藏可以使用uni.hideTabBar的api进行隐藏，但是无论是在onLoad还是onInit生命周期中，都会短暂地闪一下这个tabBar，因此如果不需要tabBar，就不要注册成tabBar界面。 2、开始配置 看一下官方文档 uniapp-tabBar 可以知道有color、select
HbuilderWA2打包app屏蔽默认导航栏(返回键)跟页面加载左滑效果
weixin_44861933的博客
11-26 611
{//未适配的公共页面，可拦截原生下载和头部导航栏, 注：通配符的规则 放在最后一个节点才能达到适配所有未适配的公共页面效果，适配规则优先级为自上而下查找匹配规则 "webviewId": "common", "matchUrls": [ { "hostname": "R:.*", "pathname":
Hbuilder开发APP(一)——底部导航条简单实现
weixin_44548736的博客
05-08 3561
作者：任铭基，撰写时间：2019年5月5日 最近在用Hbuilder开发APP来我们看下底部导航栏吧 首先是index.html，所有的代码基本上都在这里了： 底部导航标签是首先是index.html，所有的代码基本上都在这里了： 底部导航标签是nav以及class属性： 首先是mui.init()，mui框架将很多的功能配置都集中在mui.init()中，如果我们要使用某项功能，只需要在...
hbuilderx 底部_如何在Hbuilder中制作app底部导航栏
weixin_31842715的博客
01-14 4239
。1 问题描述最近在使用Hbuilder进行移动app前端开发中，我通常搭建首页框架的常规方法是在index.html主文件中使用多种框架组件模块，再通过css叠层样式表对相应模块加以修饰。但在分析Hbuilder提供的移动app底部选项卡模板的代码时，我却在index.html文件中找不到底部选项卡区域的相应代码，这很让我伤脑筋。通过查询多方面的资料并与学长交流后，我大概了解了后者搭建框架所用到...
初试vue-cli使用HBuilderx打包app的坑
10-16
5. iPhoneX适配问题：在iPhoneX上由于底部安全区的存在，可能会导致导航栏不能正确地显示在最底部。为解决这一问题，在index.html的标签中添加viewport-fit=cover，以适应安全区。 6. 打开第三方链接时遇到的问题：...
[webAPP项目]基于MUI框架webAPP之头部导航与底部导航制作详解02
IT技术研究院
11-28 796
[webAPP项目]基于MUI框架webAPP之头部导航与底部导航制作详解02
android 华为底部虚拟键盘隐藏,Hbuilder 如何隐藏华为、oppo、魅族等手机的底部虚拟按键。...
weixin_39888080的博客
05-26 828
// 安卓沉浸式 0关闭 1安卓状态栏导航栏都进入沉浸模式 2设置状态栏沉浸 3设置导航栏沉浸function windowFull(pr) {var main = plus.android.runtimeMainActivity();var windowMe = main.getWindow();plus.android.importClass(windowMe);var decorView =...
选项卡显示在底部的演示
11-20
选项卡显示在底部的演示，本次演示含有四个选项卡，一个普通文本标题选项 还有两个内嵌的选项卡，一个内嵌显示在顶部一个内嵌显示在底部；
【学习笔记】HBuilder初学，简单结构体
个性小资的博客
01-06 4810
最近在研究HBuilder的用法，在看到官方网站的介绍和文档后感觉很懵，文档中并不是由浅入深的方式带着新人通过一些常用示例来入门，一步一步循序渐进的让用户了解产品，使用产品，而是直接就列出了各种模块的方法、对象、权限等等，让我这个从技术出身而又转型做产品的人一头雾水，在学习的过程中总结出一些小心得和大家分享，共同探讨工具在这里就不介绍了，一般敲代码的装上用了就很容易上手说说移动端开发的代码基本结构先
HBuilder X实现tabBar底部导航记录
super码力的博客
11-28 4156
HBuilder X实现tabBar底部导航记录
Hbuider菜单栏不显示的问题
yeren105的博客
03-25 5990
Hbuider菜单栏不显示的问题 这两天因为项目要用到vue.js, 所以作为一个好几年没有写代码的大叔， 晚上打算回家“偷偷”学学。 虽为大叔， 雄心不减_。 很快找到了学习vue的好网站 https://learning.dcloud.io/ 看视频学习， 更加不费力。 很快看到第二节， 看完以后， 视频上让用Hbuilder试一下。 大叔心痒， 赶紧下载。 下载后， 发现一个让人抓狂的问题。...
HBuilderX.vue文件 以及 表单，导航栏的组件使用
maseter的博客
05-18 3257
<template> ui设计 所有的有关界面的都卸载这个里面 <view> 子标签 所有的标签都写在这个里面，写在<template>里面，可以嵌套，但不可以写两个 <script> js业务代码 所有有关业务代码的都写在这个里面 <style> css 样式 界面的大小，颜色，以及所有相关的样式都写在这里 <uni-nav-bar> 自定义导航栏 ...
HBuilder开发App教程03-定制图标，启动页以及打包
热门推荐
uikoo9的专栏
07-04 3万+
helloworld 上次说到了helloworld，你应该已经可以新建项目，真机调试了， 这次来说说图标的定制，启动页的定制以及打包。 图标定制 如果不定制图标的话，默认会是博文顶部图表的样子， 你肯定不想这个样子，来吧，定制一个自己的图标吧。 打开项目下的manifest.json，选择底部的图标配置（老版本需升级到最新版）， 然后选择一个制作好的256*256大小的
MUI、HTML5+、HBuilder实现透明渐变导航栏+自定义按钮（右上角分享按钮）
jiaonizuoren的博客
12-06 7597
先上效果图： js代码： mui.plusReady(function() { var ws = plus.webview.currentWebview(); ws.setStyle({ "titleNView":{ backgroundColor: '#f7f7f7',//导航栏背景色 titleText: '透明渐...
Hbuilder中百度地图插件的使用
弹指间，BUG灰飞烟灭！
06-24 2万+
需要一个app,有地图和导航功能，需要调用百度地图插件。 1.打开百度地图LBS开放平台（http://lbsyun.baidu.com/）。 2.点击API控制台进入。 3.在工具Hbuilder中创建html5+APP。 新建移动app(HelloMap)–>模板选择HTML5+–>创建 将新建项目plus文件夹中demo文件删除，只留以下三个文件
HBuilderX导航条
最新发布
04-13
在HBuilderX中，导航条是一个非常实用的功能，它可以帮助开发者快速导航到代码中的特定位置。 HBuilderX的导航条位于编辑器的顶部，它显示了当前文件的结构和层次关系。通过导航条，你可以快速定位到文件中的类、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值