码云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. ACM数论之旅2---快速幂，快速求a^b（(ノ｀Д´)ノ做人就要坚持不懈）

    a的b次方怎么求 pow(a, b)是数学头文件math.h里面有的函数 可是它返回值是double类型,数据有精度误差 那就自己写for循环咯 LL pow(LL a, LL b){//a的b次方 ...

  2. Linux中Apache+Tomcat+JK实现负载均衡和群集的完整过程

    人原创,一个字一个字地码的,尊重版权,转载请注明出处! http://blog.csdn.net/chaijunkun/article/details/6987443 最近在开发的项目需要承受很高的并 ...

  3. java 循环时候当达到这个类型的极值时 会停止输出

  4. [洛谷P4723]【模板】线性递推

    题目大意:求一个满足$k$阶齐次线性递推数列$a_i$的第$n$项. 即:$a_n=\sum\limits_{i=1}^{k}f_i \times a_{n-i}$ 题解:线性齐次递推,先见洛谷题解, ...

  5. 【转】每个 Linux 新手都应该知道的 10 个命令

    你可能认为你是 Linux 新手,但实际上并不是.全球互联网用户有 3.74 亿,他们都以某种方式使用 Linux,因为 Linux 服务器占据了互联网的 90%.大多数现代路由器运行 Linux 或 ...

  6. 单点登录(四)-----遇到问题-----cas server 源码部署tomcat运行报错ClassNotFoundException: org.jasig.cas.CasEnvironmentCo

    情况 cas单点登录 cas server 源码部署tomcat运行报错 把cas server的代码下载下来后使用gradle插件或者maven插件以及转化成eclipse·后导入发现部署到tomc ...

  7. Gradle 命令之 --stacktrace ， --info ， --debug 用法

    FAQ: Android studio 出现错误Run with --stacktrace option to get the stack trace. Run with --info or --de ...

  8. Tensorflow Object_Detection 目标检测 笔记

    Tensorflow models Code:https://github.com/tensorflow/models 编写时间:2017.7 记录在使用Object_Detection 中遇到的问题 ...

  9. QT 设置菜单图标

    目录 一.添加主窗口菜单 二.添加菜单图标 三.添加资源文件 四.使用资源文件 五.使用代码来添加菜单和图标     正文 一.添加主窗口菜单 1.新建Qt Gui应用,项目名称为myMainWind ...

  10. git<撤销本地修改与回退版本>

    1. 使用 git checkout 撤销本地修改 即放弃对本地已修改但尚未提交的文件的修改,还原其到未修改前的状态. 注意: 已 add/ commit 的文件不适用个方法,应该用本文提到的第二种方 ...