码云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. JS 字符串切割成数组

    var cheLin = "字*符*串" // console.log(cheLin) var array = cheLin.split("*");  arra ...

  2. Java容器深入浅出之PriorityQueue、ArrayDeque和LinkedList

    Queue用于模拟一种FIFO(first in first out)的队列结构.一般来说,典型的队列结构不允许随机访问队列中的元素.队列包含的方法为: 1. 入队 void add(Object o ...

  3. BZOJ3083 遥远的国度（树链剖分+线段树）

    考虑暴力树剖.那么修改路径和查询子树最小值非常简单. 对于换根当然不能真的给他转一下,我们只记录当前根是哪个.对于查询,如果查询点不在当前根到原根的路径上,显然换根是对答案没有影响的:如果是当前根,答 ...

  4. 关于字符编码：ascii、unicode与utf-8

    转自:https://foofish.net/unicode_utf-8.html 阮一峰老师对普及计算机基础技术功不可没,但毕竟老师不是神,因此也避免不了对某些概念有一些错误的理解,<字符编码 ...

  5. Rabbit and Grass HDU - 1849 (Bash+Nim)

    就是Bash 和 Nim 博弈的结合  可以直接 res ^= (Li + 1) % Mi 也可以 sg打个表  我打了个表 #include <iostream> #include &l ...

  6. 浅谈kmp

    简介: 一种由Knuth(D.E.Knuth).Morris(J.H.Morris)和Pratt(V.R.Pratt)三人设计的线性时间字符串匹配算法.这个算法不用计算变迁函数δ,匹配时间为Θ(n), ...

  7. Mybatis笔记八：MyBatis中#{}和${}的区别

    先给大家介绍下MyBatis中#{}和${}的区别,具体介绍如下: 1. $将传入的数据直接显示生成在sql中 2. #方式能够很大程度防止sql注入. 3.$方式无法防止Sql注入. 4.$方式一般 ...

  8. 主机 & 虚拟机 & 开发板 三者的恩爱情仇

    # 主机 & 虚拟机 & 开发板 > 三者网络连通性,使用ping命令检测 @ Bridge 模式 ## 主机 & 虚拟机 主机与虚拟机相当于一个网络里的两台主机,都有各 ...

  9. BZOJ.4034 [HAOI2015]树上操作 ( 点权树链剖分 线段树 )

    BZOJ.4034 [HAOI2015]树上操作 ( 点权树链剖分 线段树 ) 题意分析 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个 操作,分为三种: 操作 1 :把某个节点 ...

  10. java多线程 -- Condition 控制线程通信

    Api文档如此定义: Condition 将 Object 监视器方法(wait.notify 和 notifyAll)分解成截然不同的对象,以便通过将这些对象与任意 Lock 实现组合使用,为每个对 ...