移动端App uni-app + mui 开发记录

  前言

  1、uni-app

  uni-app是DCloud推出的终极跨平台解决方案,是一个使用Vue.js开发所有前端应用的框架,官网:http://uniapp.dcloud.io/

 

  2、mui

  号称最接近原生APP体验的高性能前端框架,官网:http://dev.dcloud.net.cn/mui/

  个人觉得,mui除了页面设计很接近原生App之外,还有一个特点就是能方便的使用App扩展规范Html5 Plus(http://www.html5plus.org/doc/h5p.html),大发幸运飞艇大发幸运飞艇我 们 能在它的源码中看到比较多的地方都有使用到

 

  3、开发大发幸运飞艇工具

  使用HBuilderX开发大发幸运飞艇工具 写uni-app的代码,以及打包App等工作,主要的业务功能依旧是使用大发幸运飞艇大发幸运飞艇我 们 熟悉的idea开发,不过页面从webPC端风格改成了移动端风格

 

   4、整体架构

  大发幸运飞艇大发幸运飞艇我 们 采用uni-app + mui的方式,使用的是官方大发幸运飞艇推荐 的 uni-app原生标题栏跟导航栏 + 嵌入webview远程大发幸运飞艇服务 的页面,也就是说除了头部、尾部,中间的内容都是类似iframe嵌入进去

  简单的说,uni-app,包括头部标题栏、底部导航栏作为App的“壳”,java后端+mui前端页面作为App的“内容”,这样选型的目的是为了方便后期的运维、升级

  webview嵌入:直接升级后端大发幸运飞艇服务 并重新部署即可,无需重新打包、升级App

  头尾使用原生组件:提升App流畅度

   

  为方便以后查阅,特此记录

 

  uni-app部分

  大发幸运飞艇我 在App.vue中对uni对象进行全局赋值,这样在每个页面都调用到,这样做的目的是为了方便全局修改,比如全局该监听大发幸运飞艇方法 、后期需要换进度条样式、更换后端大发幸运飞艇服务 大发幸运飞艇地址 等

   

  tabBar导航栏

  底部的导航栏比较简单,在page.json进行配置就可以

 

  page.json

{
    "pages": [
        //pages数组中第一项表示应用启动页
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "大发幸运飞艇首页
",
                "titleNView": {
                    "buttons": [{
                        "type": "none",
                        "float": "left"
                    }, {
                        "type": "none",
                        "float": "right",
                        "fontSrc":"/static/fonts/mui.ttf"
                    }]
                }
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8",
        "backgroundColorTop": "#F4F5F6",
        "backgroundColorBottom": "#F4F5F6"
    },
    "tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#007AFF", //#007AFF 蓝色  #f07837 橙色
        "borderStyle": "black",
        "backgroundColor": "#F8F8F8",
        "list": [{
            "pagePath": "pages/index/index",
            "iconPath": "static/image/index/index_.png",
            "selectedIconPath": "static/image/index/index.png",
            "text": "大发幸运飞艇首页
"
        }],
        "position": "bottom"
    }
}
View Code

   

  监听标题栏按钮

  设置进度条颜色

  设置进度条颜色、监听webview的url变化判断是否需要标题栏按钮等操作全都在App.vue中进行,具体页面可以直接调用样式对象、监听大发幸运飞艇方法

  App.vue

<script>
    export default {
        onLaunch: function() {
            //应用加载后初始后端大发幸运飞艇服务
大发幸运飞艇地址

            uni.phoneServiceAddress = "http://qch2.大发幸运飞艇vip
gz2.idcfengye.com"; //为了方便App演示,这里开了一个内网穿透
            
            //监听软键盘高度变化,隐藏或显示tabbar
            uni.onKeyboardHeightChange(res => {
                if (res.height > 0) {
                    uni.hideTabBar();
                } else {
                    uni.showTabBar();
                }
            })

            //全局进度条样式
            uni.webviewStyles = {
                progress: {
                    color: '#007AFF'
                }
            };

            //全局监听标题栏按钮
            uni.listenTitleButton = function(thid) {
                let webView = thid.$mp.page.$getAppWebview();

                //webView加载完成时触发,开始监听子对象的onloaded事件
                webView.onloaded = function() {
                    let wv = webView.children()[0];

                    //webView的子对象加载完成时触发  
                    wv.onloaded = function() {
                        let url = wv.getURL();
                        
                          //判断是否显示返回按钮
                        if (
                            url.indexOf("hybrid/html/error.html") >= 0 ||
                            url.indexOf("/index/index") >= 0 ||
                            url.indexOf("/login/index") >= 0
                        ) {
                            // console.log("标题栏隐藏返回按钮");
                            webView.setTitleNViewButtonStyle(0, {
                                type: 'none'
                            });
                            thid.backFun = function(object){}
                        } else {
                            // console.log("标题栏显示返回按钮");
                            webView.setTitleNViewButtonStyle(0, {
                                type: 'back'
                            });
                            thid.backFun = function(object){
                                if(object.index == 0){
                                    //回退
                                    uni.navigateBack();
                                }
                            }
                        }
                        
                        //因为大发幸运飞艇大发幸运飞艇我
们
手动设置了一些属性,导致标题栏的title不能自动获取、设置,这里需要大发幸运飞艇大发幸运飞艇我
们
手动设置一下
                        uni.setNavigationBarTitle({
                            title: wv.getTitle()
                        });
                    }
                }

                //webView手动加载、便于触发大发幸运飞艇方法

                webView.loadURL(thid.url);
            }
        },
        onShow: function() {

        },
        onHide: function() {

        }
    }
</script>

<style>
    /*每个页面公共css */
</style>
View Code

 

  index.vue

<!-- vue单文件组件 -->
<template>
    <!-- 注意必须有一个view,且只能有一个根view。所有内容写在这个view下面 -->
    <view class="main">
        <!-- 直接嵌入页面 -->
        <web-view id="webView" :src="url" :webview-styles="webviewStyles"></web-view>
    </view>
</template>

<!-- js代码,es6语法 -->
<script>
    //外部文件导入
    import * as util from '../../common/js/util.js';

    export default {
        data() {
            return {
                //当前webview请求的url
                url: uni.phoneServiceAddress + "/index/index",
                //进度条颜色样式
                webviewStyles: uni.webviewStyles,
                //回退按钮事件,比如第一页是不需要回退按钮,点进去之后的页面才需要
                backFun:function(object){}
            }
        },
        //点击标题栏按钮,这里主要是用于回退按钮
        onNavigationBarButtonTap:function(object){
            this.backFun(object);
        },
        //页面装载完成,开始监听webview路径变化
        onReady: function(options) {
            console.log("onReady");
            // #ifdef APP-PLUS
            uni.listenTitleButton(this);
            // #endif
        },
        onLoad: function(options) {
            console.log("onLoad");
        },
        onShow: function(options) {
            console.log("onShow");
        },
        // 点击导航栏,webview重新请求this.url
        onTabItemTap: function(object) {
            // #ifdef APP-PLUS
            let wv = this.$mp.page.$getAppWebview().children()[0]; 
            wv.loadURL(this.url);
            // #endif
        }
    }
</script>

<!-- css样式代码 -->
<style>
    /* css外部文件导入 */
    @import "../../common/css/uni.css";
</style>
View Code

 

  然后其他的页面跟大发幸运飞艇首页 差不多,只是this.url的路径不同,同时,如果标题栏还需要其他按钮(比如右边再来个分享、或者添加按钮),就再加一个按钮,然后操作不同的下标

 

  配置错误页面

 

 

   webview组件

  webview组件介绍:http://uniapp.dcloud.io/component/web-view

 

  webview网页与App的交互

 

  1、webview调用uni-app的api,那几个路径的跳转都没有问题,postMessage说是在特定时机(后退、分享等)中才会触发,但是大发幸运飞艇我 一次都没有成功

  需要注意:在webview网页中调uni-app的api或者是5+扩展规范,需要监听原生扩展的事件,等待plus ready

document.addEventListener('UniAppJSBridgeReady', function() {
        uni.navigateTo({
            url: 'page/index/index'
        });
});    

  或者使用mui已经帮大发幸运飞艇大发幸运飞艇我 们 封装好了大发幸运飞艇方法 ,所有的5+规范的api都可以调

mui.plusReady(function() {
    plus.nativeUI.toast("xxxxxxx");
});

 

  2、uni-app调用webview网页的大发幸运飞艇方法 ,可以直接在uni-app的代码里面使用5+规范中的webview对象的evaljs大发幸运飞艇方法 ,将js代码发生到webview页面去执行,

  api大发幸运飞艇地址 :http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.evalJS,例如

plus.webview.currentWebview()[0].evalJS("alert('哈哈哈')");

  webview页面就会弹出"哈哈哈"弹窗

 

  但有一点要注意,比如在webview页面使用5+规范去操作uni-app原生标题栏按钮的回调事件中,大发幸运飞艇大发幸运飞艇我 们 发现,在回调大发幸运飞艇方法 的作用域可以访问到外面的对象,也可以是获取到dom文档里的标签、元素,但直接修改DOM文档发现时不起作用的,看文档才发现,原来webview的层级比里面的内容要高,这时候大发幸运飞艇大发幸运飞艇我 们 选择下面这样方案

mui.plusReady(function () {
    let webView = plus.webview.currentWebview();

    //webView加载完成时触发,开始监听子对象的onloaded事件
    webView.onloaded = function() {
        let wv = webView.children()[0];

        //webView的子对象加载完成时触发
        wv.onloaded = function () {

            /* 标题栏按钮 */
            webView.setTitleNViewButtonStyle(1, {
                onclick: function (event) {
                    // 将JS脚本发送到Webview窗口中运行,可用于实现Webview窗口间的数据通讯
                    wv.evalJS("show()");
                }
            });
        }
    }
});

function show() {
    
}

 

 

  mui部分

  项目工程结构就是大发幸运飞艇大发幸运飞艇我 们 之前熟悉的springboot + thymeleaf + springdata-jpa,开发起来除了页面风格(移动端)不同,其他的都还好

 

  mui部分主要是业务页面、功能的开发,有时候也需要调用5+规范的api,比如调用手机相机、文件管理、系统通知等,需要用到的时候就看api:http://www.html5plus.org/doc/h5p.html

  页面开发主要就参考mui的新手文档(http://dev.dcloud.net.cn/mui/getting-started/)、官网演示(http://www.dcloud.io/mui.html)、文档(http://dev.dcloud.net.cn/mui/ui/)等,同时也参考别人的App页面设计(QQ、微信、支付宝、京东等)

  

  mui封装弹窗

  比如类似京东他们的这种弹窗,大发幸运飞艇我 认为比较好看,比较具有通用性

  

 

 

  所以也基于mui封装了自己的一套弹窗效果

  先看下演示

  

  代码

  css

  封装在common.css中

/* 封装自定义弹窗 上右下左,居中 */
.huanzi-dialog {
    position: fixed;
    background-color: white;
    z-index: -1;
    overflow: hidden;
}

.huanzi-dialog-top {
    width: 100%;
    top: -100%;
    border-radius: 0 0 13px 13px;
}

.huanzi-dialog-right {
    width: 85%;
    top: 0;
    right: -85%;
    bottom: 0;
    border-radius: 13px 0 0 13px;
}

.huanzi-dialog-bottom {
    width: 100%;
    bottom: -100%;
    border-radius: 13px 13px 0 0;
}

.huanzi-dialog-left {
    width: 85%;
    top: 0;
    left: -85%;
    bottom: 0;
    border-radius: 0 13px 13px 0;
}

.huanzi-dialog-center {
    border-radius: 13px;
    opacity: 0;
    /* 方案一 */
    /*margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;*/

    /* 方案二 */
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0) scale(1.185);
}
View Code

 

  js

  封装在common.js中

/* 封装天讯弹窗 */
var HuanziDialog = {
    mask: null,//mui遮阴层对象
    showSpeed: 300,//弹出速度
    hideSpeed: 100,//隐藏速度
    removeFlag: true,//close内部是否执行操作
    /**
     * 隐藏弹窗,内部大发幸运飞艇方法

     * @param select jq元素选择器,#xxx、.xxx等,如果为空,则隐藏所有
     * @param callback 回调大发幸运飞艇方法

     * @param speed 速度
     */
    hideFun: function (select, callback, speed) {
        let $huanziDialog = select ? $(select) : $(".huanzi-dialog");
        speed = speed ? speed : HuanziDialog.hideSpeed;

        //上右下左,居中
        $huanziDialog.each(function () {
            let dialog = $(this);
            let clazz = dialog.attr("class");
            if (clazz.indexOf("huanzi-dialog-top") > -1) {
                dialog.animate({top: '-100%'}, speed);
            } else if (clazz.indexOf("huanzi-dialog-right") > -1) {
                dialog.animate({right: '-85%'}, speed);
            } else if (clazz.indexOf("huanzi-dialog-bottom") > -1) {
                dialog.animate({bottom: '-100%'}, speed);
            } else if (clazz.indexOf("huanzi-dialog-left") > -1) {
                dialog.animate({left: '-85%'}, speed);
            } else if (clazz.indexOf("huanzi-dialog-center") > -1) {
                dialog.animate({opacity: 0}, speed);
            }
            setTimeout(function () {
                dialog.css("z-index", "-1");
            }, speed)
        });

        callback && callback();
    },

    /**
     * 显示弹窗,内部大发幸运飞艇方法

     * @param select jq元素选择器,#xxx、.xxx等,如果为空,则显示所有
     * @param callback 回调大发幸运飞艇方法

     * @param speed 速度
     */
    showFun: function (select, callback, speed) {
        let $huanziDialog = select ? $(select) : $(".huanzi-dialog");
        speed = speed ? speed : HuanziDialog.hideSpeed;

        //上右下左,居中
        $huanziDialog.each(function () {
            let dialog = $(this);
            dialog.css("z-index", "999");

            let clazz = dialog.attr("class");
            if (clazz.indexOf("huanzi-dialog-top") > -1) {
                dialog.animate({top: '0%'}, speed);
            } else if (clazz.indexOf("huanzi-dialog-right") > -1) {
                dialog.animate({right: '0%'}, speed);
            } else if (clazz.indexOf("huanzi-dialog-bottom") > -1) {
                dialog.animate({bottom: '0%'}, speed);
            } else if (clazz.indexOf("huanzi-dialog-left") > -1) {
                dialog.animate({left: '0%'}, speed);
            } else if (clazz.indexOf("huanzi-dialog-center") > -1) {
                dialog.animate({opacity: 1}, speed);
            }
        });
        HuanziDialog.removeFlag = true;
        callback && callback();
    },

    /**
     * 初始化mui遮阴层对象
     */
    init: function () {
        HuanziDialog.mask = mui.createMask();

        /**
         * 重写close大发幸运飞艇方法

         */
        HuanziDialog.mask.close = function () {
            if (!HuanziDialog.removeFlag) {
                return;
            }
            //大发幸运飞艇方法
直接在这里执行
            HuanziDialog.hideFun();
            //调用大发幸运飞艇删除

            HuanziDialog.mask._remove();
        };
    },

    /**
     * 显示弹窗,供外部调用(参数同内部大发幸运飞艇方法
一致)
     */
    show: function (select, callback, speed) {
        HuanziDialog.showFun(select, callback, speed);
        HuanziDialog.mask.show();//显示遮罩
    },

    /**
     * 隐藏弹窗,供外部调用(参数同内部大发幸运飞艇方法
一致)
     */
    hide: function (select, callback, speed) {
        HuanziDialog.hideFun(select, callback, speed);
        HuanziDialog.mask.close();//关闭遮罩
    },

    /**
     * 警告框
     * @param title 标题
     * @param message 内容
     * @param callback 点击确认的回调
     */
    alert: function (title, message, callback) {
        let $html = $("<div class=\"mui-popup mui-popup-in\" style=\"display: block;\">" +
            "<div class=\"mui-popup-inner\">" +
            "   <div class=\"mui-popup-title\">" + title + "</div>" +
            "   <div class=\"mui-popup-text\">" + message + "</div>" +
            "</div>" +
            "<div class=\"mui-popup-buttons\">" +
            "<span class=\"mui-popup-button mui-popup-button-bold confirm-but\">确定</span>" +
            "</div>" +
            "</div>");
        $html.find(".confirm-but").click(function () {
            HuanziDialog.removeFlag = true;
            HuanziDialog.mask.close();
            $html.remove();
            callback && callback();
        });
        HuanziDialog.mask.show();//显示遮罩
        HuanziDialog.removeFlag = false;
        $("body").append($html);
    },

    /**
     * 确认消息框
     * @param title 标题
     * @param message 内容
     * @param callback 点击确认的回调
     */
    confirm: function (title, message, callback) {
        let $html = $("<div class=\"mui-popup mui-popup-in\" style=\"display: block;\">" +
            "<div class=\"mui-popup-inner\">" +
            "   <div class=\"mui-popup-title\">" + title + "</div>" +
            "   <div class=\"mui-popup-text\">" + message + "</div>" +
            "</div>" +
            "<div class=\"mui-popup-buttons\">" +
            "<span class=\"mui-popup-button mui-popup-button-bold cancel-but\" style='color: #585858;'>取消</span>" +
            "<span class=\"mui-popup-button mui-popup-button-bold confirm-but\">确定</span>" +
            "</div>" +
            "</div>");
        $html.find(".cancel-but").click(function () {
            HuanziDialog.removeFlag = true;
            HuanziDialog.mask.close();
            $html.remove();
        });
        $html.find(".confirm-but").click(function () {
            $html.find(".cancel-but").click();
            callback && callback();
        });

        HuanziDialog.mask.show();//显示遮罩
        HuanziDialog.removeFlag = false;
        $("body").append($html);
    },

    /**
     * 自动消失提示弹窗
     * @param message 内容
     * @param speed 存在时间
     */
    toast: function (message, speed) {
        speed = speed ? speed : 2000;
        let $html = $("<div class=\"huanzi-dialog huanzi-dialog-center\" style=\"width: 45%;height: 20%;opacity: 1;z-index: 999;background-color: #5a5a5ad1;\">" +
            "    <p style=\" position: relative; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0) scale(1); color: #e0e0e0; font-size: 20px; \">" + message + "</p>" +
            "</div>");
        $("body").append($html);
        setTimeout(function () {
            $html.remove();
        }, speed);
    }
};

//先初始化自定义弹窗
HuanziDialog.init();
View Code

 

  html

  测试页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>基于MUI封装常用弹窗</title>
    <!-- jquery -->
     <script th:src="@{/webjars/jquery/3.1.1/jquery.min.js}"></script>

    <!-- 引入mui框架 -->
    <link rel='stylesheet' th:href="@{/common/mui/css/mui.css}"/>
    <script th:src="@{/common/mui/js/mui.js}"></script>

    <!-- 最后引入公用代码 -->
    <link rel='stylesheet' th:href="@{/common/common.css}"/>
    <script th:src="@{/common/common.js}"></script>

    <style>
        body{
            text-align: center;
        }

        .mui-btn{
            width: 50%;
            margin: 10px auto;
        }
    </style>
</head>
<body>
    <h4>基于MUI封装常用弹窗</h4>

    <button class="mui-btn" onclick="HuanziDialog.show('#top')"></button>
    <button class="mui-btn"  onclick="HuanziDialog.show('#bottom')"></button>
    <button class="mui-btn"  onclick="HuanziDialog.show('#left')"></button>
    <button class="mui-btn"  onclick="HuanziDialog.show('#right')"></button>
    <button class="mui-btn"  onclick="HuanziDialog.show('#center')">居中</button>
    <button class="mui-btn"  onclick="HuanziDialog.alert('系统提示','大发幸运飞艇我
是警告框!',function() {console.log('大发幸运飞艇你
已确认警告!')})">警告框</button>
    <button class="mui-btn"  onclick="HuanziDialog.confirm('系统提示','确认要XXX吗?',function() {HuanziDialog.toast('很好,大发幸运飞艇你
点击了确认!');console.log('很好,大发幸运飞艇你
点击了确认!')})">确认框</button>
    <button class="mui-btn"  onclick="HuanziDialog.toast('提交成功')">自动消失提示框</button>

    <!---->
    <div id="top" class="huanzi-dialog huanzi-dialog-top" style="height: 500px">
        <h5>大发幸运飞艇我
从上边弹出</h5>
    </div>

    <!---->
    <div id="bottom" class="huanzi-dialog huanzi-dialog-bottom" style="height: 500px">
        <h5>大发幸运飞艇我
从下边弹出</h5>
    </div>

    <!---->
    <div id="left" class="huanzi-dialog huanzi-dialog-left">
        <h5>大发幸运飞艇我
从左边弹出</h5>
    </div>

    <!---->
    <div id="right" class="huanzi-dialog huanzi-dialog-right">
        <h5>大发幸运飞艇我
从右边弹出</h5>
    </div>

    <!-- 居中 -->
    <div id="center" class="huanzi-dialog huanzi-dialog-center" style="width: 65%;height: 30%">
        <h5>大发幸运飞艇我
从中间弹出</h5>
    </div>

</body>
</html>
View Code

 

  其实后面的警告框、确认框的样式就是mui的5+端样式,那大发幸运飞艇大发幸运飞艇我 们 为什么还要封装呢?在开发中大发幸运飞艇大发幸运飞艇我 们 发现,在PS端浏览器将调试模式改成手机端,mui的封装的弹窗是上面的效果,但到真机上运行它又变成原生的弹窗样式,原来mui底层有进行了判断,安卓、苹果、5+等样式都不一样,这里大发幸运飞艇大发幸运飞艇我 们 为了弹窗风格的统一,同时也是为了方便后期的统一调整,因此再进行了一层封装

 

  App调试、打包

  运行 -> 运行到手机或模拟器

  需要安装个模拟器(大发幸运飞艇我 的是雷电)、或者直接用USB数据先连接进行调试(PS:大发幸运飞艇我 的模拟器连接经常会断开,不知道是什么回事,有时候调试调试着就断开了,检查了也没有其他应用占用adb)

 

  App打包是在:发行 - > 原生App-云打包

  开发阶段,使用Dcloud大发幸运飞艇公司 的公用证书云打包就可以了,正式上线就需要自己的证书去打包

 

 

   打包成功后控制台就会返回大发幸运飞艇下载 链接

 

 

 

  后记

  移动端App uni-app + mui 开发暂时先记录到这,后续再补充;由于是大发幸运飞艇公司 的App,就不方便演示,等有空了再做个demo把完整的一套东西再做完整演示;

 

  另一种方案

  虽然官方大发幸运飞艇推荐 尽量使用原生导航。甚至有时需要牺牲一些不是很重要的需求。但有时候大发幸运飞艇大发幸运飞艇我 们 就是想自定义原生标题栏,特别是大发幸运飞艇大发幸运飞艇我 们 是webview嵌入的方式

    "globalStyle": {
        //隐藏原生标题栏,主意事项请查阅官网:http://uniapp.dcloud.io/collocation/pages?id=customnav
        "navigationStyle":"custom"
    },

  如果要自定义导航栏,有哪些主要的点,官方在这里已经说得很清楚了:http://uniapp.dcloud.io/collocation/pages?id=customnav,但如果大发幸运飞艇大发幸运飞艇我 们 采用的是webview嵌入的方式,就要注意了,<web-view> 组件默认铺满全屏并且层级高于前端组件,如果大发幸运飞艇大发幸运飞艇我 们 按照文档中操作,发现还是会顶到系统状态栏

   因此占高div大发幸运飞艇大发幸运飞艇我 们 最好也写在webview里面,系统状态栏的高度可以动态获取:http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight

mui.plusReady(function(){
    //获取系统状态栏的高度,单位为像素(px),值为Webview中的逻辑高度单位
    let statusbarHeight = plus.navigator.getStatusbarHeight();
    alert(statusbarHeight)
});

 

 

  自己写标题栏的话可以直接用mui的这个,或者基于它,大发幸运飞艇大发幸运飞艇我 们 自己再封装一个自己的标题栏

  

 

   但是这样对代码的书写规范有一定的要求,页面统一分为头部、内容、尾部,中间的内容是可滑动区域,例如:

<body>
    <!-- 头部 -->
    <header id="header" class="mui-bar mui-bar-nav">
        <!-- 系统状态栏占高div -->
        <div></div>

        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">头部导航栏</h1>
        <a class="mui-icon mui-icon-bars mui-pull-right"></a>
    </header>
    
    <!-- 内容(可滑动区域) -->
    <div class="mui-scroll-wrapper">
        <div class=" mui-scroll">
            <p>这里是内容</p>
        </div>
    </div>
    
    <!-- 底部(如有需要,可扩展尾部导航栏) -->
</body>

  当然,大发幸运飞艇大发幸运飞艇我 们 可以进行统一封装,使用thymeleaf的替换,或者使用js去追加,这样可以减少每个页面的代码量,方便维护,但是视觉上就会有闪烁效果,因为每个页面的头部可能不一样,需要用js去追加,这个就需要权衡利弊选择合适的方式

posted @ 2019-12-02 19:14  huanzi-qch  阅读(...)  评论(... 编辑 收藏