Hbuilder开发APP（一）——底部导航条简单实现

最新推荐文章于 2024-07-29 22:41:59 发布

猿小侯

最新推荐文章于 2024-07-29 22:41:59 发布

阅读量3.1w

点赞数 7

分类专栏： HBuilder 文章标签： WebApp 前端开发 HBuilder 底部导航条 app

本文链接：https://blog.csdn.net/chengxu_hou/article/details/72821050

版权

Hbuilder是由DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE，它最大的特点及优势就是——快，通过完整的语法提示和代码输入法、代码块及很多配套，Hbuilder能大幅度提升HTML、js、css的开发效率。并且HBuilder本身主体就是基于Eclipse，所以能够兼容Eclipse的插件。作为一款快速开发的IDE，其不仅能开发前端，还能开发APP，利用H5+技术，结合mui框架模板，就可以开发出非常漂亮的Android程序及IOS程序，想想是不是就很兴奋呢，没错，从此你不再只是前端

更多Hbuilder的更多介绍大家自行百度，使用教程点击这里。

这篇文章主要介绍一下简单的底部导航条的实现，效果截图：

（录屏工具不能用了，小伙伴们自己可以在手机上跑一下，看一下效果）

看代码：

首先是index.html，所有的代码基本上都在这里了：

<!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" >
			<sp