码云SVN仓库地址：https://gitee.com/lim2018/vx/tree/master

MUI项目基础框架，底部导航栏切换

目录结构

index为入口页主体，sub1-4为要切换的子页面

index页代码：

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

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

        <style>

            /**头部标题栏**/

            .mui-bar-nav {

                background: #;

            }

            .mui-title {

                color: #FFFFFF;

            }

            /**导航图标颜色**/

            .mui-bar-tab .mui-tab-item.mui-active {

                color: #4cd964;

            }

        </style>

    </head>

    <body>

        <!--

        作者：@qq.com

        时间：--

        描述：头部

    -->

        <header class="mui-bar mui-bar-nav">

            <h1 class="mui-title">微信</h1>

        </header>

        <!--主体为子页面-->

        <!--

            作者：@qq.com

            时间：--

            描述：底部导航

        -->

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

            <a class="mui-tab-item mui-active mui-tab-href" href="sub1.html">

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

                <span class="mui-tab-label">微信</span>

            </a>

            <a class="mui-tab-item mui-tab-href" href="sub2.html">

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

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

            </a>

            <a class="mui-tab-item mui-tab-href" href="sub3.html">

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

                <span class="mui-tab-label">发现</span>

            </a>

            <a class="mui-tab-item mui-tab-href" href="sub4.html">

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

                <span class="mui-tab-label">我</span>

            </a>

        </nav>

    </body>

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

        //mui初始化

        mui.init();

        //mui加载完成

        mui.plusReady(function() {

            //定义子页面数组

            var subPages=[];

            //取href所在的dom对象

            var href=document.getElementsByClassName("mui-tab-href");

            for(var i=;i<href.length;i++){

                //把每个导航页对应的href放入数组

                subPages[i]=href[i].getAttribute("href");

            }

            //定义主页面的样式,主要是大小位置

            var subPageStyle = {

                top: "44px", //子页面距离顶部高度

                bottom: "50px" //子页面距离底部距离

            };

            //获取主的webview

            var mainView = plus.webview.currentWebview();

            //遍历数组，根据每个url创建webviwe

            for(var i = ; i < subPages.length; i++) {

                //括号内参数分别为 url id style

                var subView = plus.webview.create(subPages[i], subPages[i], subPageStyle);

                //把子webviwe追加到主的webviwe中 子webviwe默认隐藏

                mainView.append(subView);

            }

            //然后要第一个子webview显示出来 也就是导航微信那页

            //补充：index这页是入口页 默认打开APP时候就是显示webview中,所以不用另外加入webview中

            plus.webview.show(subPages[]);

            //给每个导航图标注册单击事件

            mui(".mui-bar-tab").on("tap","a",function(){

                //设置当前点击的导航图标对应的子页面的webview显示,根据指定的id设置

                //id在a标签的href内 取里面的值就行

                var id=this.getAttribute("href");

                plus.webview.show(id);

            })

        })

    </script>

</html>

子页面sub1代码 其他页类似

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

    </head>

    <body>

        <!--

        作者：@qq.com

        时间：--

        描述：主体

    -->

        <div class="mui-content">

            <h1>微信</h1>

        </div>

    </body>

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

    <script type="text/javascript">

        mui.init()

    </script>

</html>

MUI项目基础框架的更多相关文章

  1. SpringCloud笔记二：搭建项目基础框架

    目录 搭建框架 新建父工程 新建子工程api 新建子工程提供者provider 新建消费者consumer 总结 搭建框架 我们的SpringCloud微服务框架是父子工程,有一个父工程,剩下的都是子 ...

  2. 亲手搭建一个基于Asp.Net WebApi的项目基础框架4

    实现目的:配置website端与服务端对接 1:配置好各项配置文件 2:server端编写接口客户端调用 1.1首先配置文件有log4的配置文件,有config的配置文件,还有服务列表的配置文件 首先 ...

  3. 亲手搭建一个基于Asp.Net WebApi的项目基础框架1

    目标:教大家搭建一个简易的前后端分离的项目框架. 目录: 1:关于项目架构的概念 2:前后端分离的开发模式 3:搭建框架的各个部分 这段时间比较闲,所以想把之前项目里用到的一些技术写到博客里来,分享给 ...

  4. 亲手搭建一个基于Asp.Net WebApi的项目基础框架2

    本篇目的:封装一些抽象类 1::封装日志相关类 2:封装一个Service操作类 3:封装缓存操作类 4:封装其他一些常用Helper 1.1在Framework项目里面建立好相关操作类文件夹,以便于 ...

  5. AS3项目基础框架搭建分享robotlegs2 + starling1.3 + feathers1.1

    这个框架和我之前使用robotlegs1版本的大体相同,今天要写一个新的聊天软件就把之前的框架升级到了2.0并且把代码整理了一下. 使用适配器模式使得starling的DisplayObject和fl ...

  6. 亲手搭建一个基于Asp.Net WebApi的项目基础框架3

    1:使用Framework工具类封装http请求 接上第二篇的步骤,现在在站点中使用封装好的组件,将framework编译好之后把dll提取出来,然后放到lib当中 在website中引用dll 接下 ...

  7. spring+springMVC+mybatis的框架项目基础环境搭建

    上一个项目在后台用到spring+springMVC+mybatis的框架,先新项目初步需求也已经下来,不出意外的话,应该也是用这个框架组合. 虽然在之前activiti相关的学习中所用到的框架也是这 ...

  8. 从零开始学习 asp.net core 2.1 web api 后端api基础框架(二)-创建项目

    原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(二)-创建项目 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.ne ...

  9. Web自动化必会知识：「Web基础、元素定位、元素操作、Selenium运行原理、项目实战+框架」

    1.web 基础-html.dom 对象.js 基本语法 Dom 对象里面涉及元素定位以及对元素的修改.因为对元素操作当中涉及的一些 js 操作,js 基本语法要会用.得要掌握前端的基本用法.为什么要 ...

随机推荐

  1. robotium学习及整理

    一.                      Robotium 简介 Robotium是一款国外的Android自动化测试框架,主要针对Android平台的应用进行黑盒自动化测试,它提供了模拟各种手 ...

  2. 浅析Web数据存储-Cookie、UserData、SessionStorage、WebSqlDatabase

    Cookie 它是标准的客户端浏览器状态保存方式,可能在浏览器诞生不久就有Cookie了,为什么需要Cookie 这个东东?由于HTTP协议没有状态,所以需要一个标志/存储来记录客户浏览器当前的状态, ...

  3. ubuntu 16.04 部署 pypy+nginx+uwsgi+django(详细)

    1.nginx                                                                                             ...

  4. MT【149】和式变形

    (2018浙江省赛14题)将$2n(n\ge2)$个不同的整数分成两组$a_1,a_2,\cdots,a_n;b_1,b_2,\cdots,b_n$.证明:$\sum\limits_{1\le i\l ...

  5. 【刷题】洛谷 P3950 部落冲突

    题目背景 在一个叫做Travian的世界里,生活着各个大大小小的部落.其中最为强大的是罗马.高卢和日耳曼.他们之间为了争夺资源和土地,进行了无数次的战斗.期间诞生了众多家喻户晓的英雄人物,也留下了许多 ...

  6. BZOJ 2580: [Usaco2012 Jan]Video Game

    2580: [Usaco2012 Jan]Video Game Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 142  Solved: 96[Subm ...

  7. Android源码批量下载及导入到Eclipse

    1.去http://code.google.com/p/msysgit/downloads/list  下载Git,进行安装 2.生成批量下载脚本文件  下载批量工具CreatAutoGetSh(工具 ...

  8. set.seed(7)什么意思

    以前虽然在每个程序都看见过,但是没注意过这个问题,也不理解是什么意思,去搜了一些帖子才明白. 其实,很好理解,就是如果你不加set.seed(7),当然代码也可以执行这个命令,但是每次执行的结果都会不 ...

  9. NFS服务端+客户端配置

    一.Server端配置 1.下载rpcbind和nfs #yum install -y rpcbind nfs-utils 2.创建共享文件并授权 创建共享文件夹 #mkdir /server-nfs ...

  10. VS生成事件执行XCOPY时出现Invalid num of parameters的解决方案

    最近想偷懒 想把项目生成的dll全部自动汇集到一个文件夹下 于是乎就动用了VS的生成后事件 在执行Xcopy的时候碰到了点问题 Invalid number of parameters 挺奇怪的,在公 ...