码云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. Implement Trie and find longest prefix string list

    package leetcode; import java.util.ArrayList; import java.util.List; class TrieNode{ Boolean isWord; ...

  2. VS2012 Nuget 安装 AutoMapper时报错的解决方法

    VS2012 在.net 4.0下安装AutoMapper时,会报以下错误: “AutoMapper”已拥有为“Standard.Library”定义的依赖项. 'AutoMapper' alread ...

  3. 2018 南京icpc现场赛总结

    Day 0 提前5个小时从学校出发,在登机口坐下时,飞机还有1个多小时起飞. 航班准时起飞,到了南京以后直接坐地铁到学校附近(南京地铁票也太精致了吧). 因为天已经黑了,就只在学校附近转了一圈就回酒店 ...

  4. BZOJ5308 ZJOI2018胖

    贝尔福特曼(?)的方式相当于每次将所有与源点直接相连的点的影响区域向两边各扩展一格.显然每个点在过程中最多更新其他点一次且这些点构成一段连续区间.这个东西二分st表查一下就可以了.注意某一轮中两点都更 ...

  5. Win7剪贴板粘贴汉字显示为乱码的解决办法

    http://blog.csdn.net/tanaya/article/details/8684805 最近2天发现在记事本粘贴的时候汉字都显示为乱码了,很纠结,后面发现是[区域和语言]设置中的“文本 ...

  6. 【HDU5469】Antonidas（点分治，字符串哈希）

    [HDU5469]Antonidas(点分治,字符串哈希) 题面 HDU Vjudge 题解 啊哈?什么垃圾一眼点分治+Hash判断,哈哈哈哈哈,让我来码码码. 诶,怎么WA了.改改改改改. 诶,怎么 ...

  7. 【bzoj2002】 Hnoi2010—Bounce 弹飞绵羊

    http://www.lydsy.com/JudgeOnline/problem.php?id=2002 (题目链接) 题意 数轴上${n}$个点,每个点有一个权值${a_i}$,如果到达这个点,接下 ...

  8. MVC中使用RadioButtonFor

    http://shw3588.blog.163.com/blog/static/6507576201321395845538/ 1 进行初始化 <%=Html.RadioButtonFor(mo ...

  9. 21天实战caffe笔记_第一天

    1 深度学习术语 深度学习常用名词:有监督学习.无监督学习.训练数据集.测试数据集.过拟合.泛化.惩罚值(损失loss); 机器自动学习所需三份数据:训练集(机器学习的样例),验证集(机器学习阶段,用 ...

  10. spark-shell启动spark报错

    前言 离线安装好CDH.Coudera Manager之后,通过Coudera Manager安装所有自带的应用,包括hdfs.hive.yarn.spark.hbase等应用,过程很是波折,此处就不 ...