码云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. es6 const关键字

    const是constant(常量)的缩写,const和 let一样,也是用来声明变量的,但是const是专门用于声明一个常量的,顾名思义,常量的值是不可改变的.以前用var声明的变量,想怎么改就怎么 ...

  2. 解决Linux关闭SSH，终端后运行程序终止问题（包括后台）

    问题描述: 每次SSH到服务器上,然后运行了一个自己写的服务端程序,比如 ./myserver.sh ,然后关闭ssh或者终端之后,发现服务不能访问. 简要分析下: 根据   这篇博文  的提示,ss ...

  3. oracle表空间到32G后扩容

    ), ) total_space FROM dba_data_files ORDER BY tablespace_name; /*查看表空间的使用情况*/ select a.a1 表空间名称, tru ...

  4. Django 2.0 学习(21)：Django Session

    Django Session Session 与Cookie 1.简介 1.Cookie不属于http协议范围,由于http协议无法保持状态,但实际情况,我们又需要"保持状态",因 ...

  5. 【大数据】Azkaban学习笔记

    一 概述 1.1 为什么需要工作流调度系统 1)一个完整的数据分析系统通常都是由大量任务单元组成: shell脚本程序,java程序,mapreduce程序.hive脚本等 2)各任务单元之间存在时间 ...

  6. P4867 Gty的二逼妹子序列

    题目描述 Autumn和Bakser又在研究Gty的妹子序列了!但他们遇到了一个难题. 对于一段妹子们,他们想让你帮忙求出这之内美丽度∈[a,b]的妹子的美丽度的种类数. 为了方便,我们规定妹子们的美 ...

  7. Web前端开发神器--WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版

    WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版 http://www.jb51.net/softs/171905.html WebStorm 是jetbrains公司旗 ...

  8. HBase介绍及简易安装

    HBase简介 HBase是Apache Hadoop的数据库,能够对大型数据提供随机.实时的读写访问,是Google的BigTable的开源实现.HBase的目标是存储并处理大型的数据,更具体地说仅 ...

  9. ZABBIX 3.4 监控Nginx 状态(七）

    一.环境准备 1.在nginx的配置文件中,添加status配置        location /nginx_status {               stub_status on;       ...

  10. 20135319zl软件破解报告

    编写一个简单的C程序.要求只有输入a,才能通过. 现在,使用objdump –d po反汇编这个程序 找到main函数,可以发现movb $0x61,0x1f(%esp)这句语句中是将字符a(对应0x ...