mui框架移动开发初体验详解


Posted in Javascript onOctober 11, 2017

前  言

博主最近在接触移动APP,学习了几个小技巧,和大家分享一下。

1. 状态栏设置

现在打开绝大多数APP,状态栏都是与APP一体,不仅美观,而且与整体协调。

博主是个中度强迫症患者,顶部那个小黑条实在让我不舒服。

首先,我们在HBuilder上新建一个移动APP项目

1.1沉浸式状态栏(状态栏透明)

一般整个页面是图片时,会使状态栏透明。

首先,检测当前环境是否支持沉浸式状态栏。检测语句:

<script type="text/javascript">
  document.addEventListener('plusready', function(){
    //是否支持沉浸式状态栏
    alert(plus.navigator.isImmersedStatusbar());
    
  });
</script>

默认是不支持的,会弹出false。想让环境支持,需要修改项目下的配置文件manifest.json

在项目下有个manifest.json文件,打开后,打开代码视图:

mui框架移动开发初体验详解

在代码视图"plus"下添加

"statusbar": {
      "immersed": true
    },

如图所示:

mui框架移动开发初体验详解

修改完成后,会弹出true,效果如下:

mui框架移动开发初体验详解

终端支持:

  • Android4.4及以上系统支持;
  • iOS7.0及以上系统支持

1.2状态栏全屏

状态栏全屏是没有状态栏,不显示电量、信号那一条。

这个效果是在JS文件中加入语句:

<script type="text/javascript">
  document.addEventListener('plusready', function(){
    //参数:true - 全屏;false - 不全屏
    plus.navigator.setFullscreen(true);
    
  });
</script>

效果如下:

mui框架移动开发初体验详解

1.3状态栏背景色

修改背景色一般用于页面顶部背景色为纯色的场景,修改成和页面一致的背景色,使页面更和谐。

//设置系统状态栏背景色
plus.navigator.setStatusBarBackground('#6495ED');

Android平台不支持此功能,如有大神,请多多指点。

2. 毛玻璃效果

图片模糊化可以给人朦胧美的效果。点一下以前没提到的图片模糊效果:

css属性filter:

filter: blur(16px);

blur()中的像素是模糊程度。

3. 简单使用mui快速搭建页面

前面最困扰我的状态栏问题解决了,页面布局就好办了。用mui模板可以快速搭建出来。

以XX音乐为例:

2.1导入文件

<script src="js/mui.min.js"></script>
  <link href="css/mui.min.css" rel="external nofollow" rel="stylesheet"/>
  <link rel="stylesheet" href="css/bofang.css" rel="external nofollow" />

2.2HTML代码

下面HTML代码为使用的mui框架部分和上述状态栏相关部分,这块mui是关于区域轮播部分

顶部img是背景图,外层包裹的div非常有必要,overflow属性要活用,才能有完美的效果。

因为APP的header部分用的定位,所以页面主体部分要加高度为74px左右的padding-top

<div class="mui-slider">
       <div class="mui-slider-group">
         <div class="mui-slider-item">
          第一个轮播区域
         </div>
         <div class="mui-slider-item">
          <p class="singer">
            <span class="ce"></span>
            <span class="mui-text-center">G-DRAGON</span>
            <span class="ce"></span>
          </p>
          <p class="yinxiao">
            <img src="img/player_btn_sq_hlight.png"/>
            <img src="img/player_btn_mv_normal.png"/>
            <img src="img/player_btn_dts_on.png"/>
          </p>
          
          <div class="datu">
            <img src="img/GD.jpg"/>
          </div>
          
          <p class="geci">A Boy - G-DRAGON</p>
          
          
         </div>
         <div class="mui-slider-item">
          第二个轮播区域
         </div>
       </div>
       <div class="mui-slider-indicator">
        <div class="mui-indicator"></div>
        <div class="mui-indicator mui-active"></div>
        <div class="mui-indicator"></div>
       </div>
    </div>

主要css代码:

*{
  padding: 0px;
  margin: 0px;
}
body{
  overflow: hidden;
  height: 100vh;
}
#background{
  overflow: hidden;
  text-align: right;
}
#background #backImg{
  margin-left: -120px;
  height: 99vh;
  filter: blur(16px);
}
.mui-bar-nav{
  top: 30px;
  background-color: rgba(0,0,0,0);
  box-shadow: 0 0px 0px #ccc;
}
.mui-bar-nav .mui-title{
  color: white;
  font-size: 20px;
  font-weight: normal;
  line-height: 50px;
}
#continer{
  width: 100%;
  height: 100vh;
  position: relative;
  top: -100vh;
  z-index: 5;
  padding-top: 80px;
  background-color: rgba(0,0,0,0.7);
  text-align: center;
  color: white;
}

后面不一样大小的图片居中对齐这一点还一时没想起来。这里就要用到弹性布局的交叉轴对齐方式:

#continer .footer1{
  margin-bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

显示下效果:

mui框架移动开发初体验详解

mui框架移动开发初体验详解

小q有话说

博主写博客也是想提高自己,还请大神指教。

另外,框架确实好用,但是博主觉得,还是得把原生代码先掌握好。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 表单验证常见正则
Sep 28 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
Javascript编程之继承实例汇总
Nov 28 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
html中两种获取标签内的值的方法
Jun 16 jQuery
Scala解析Json字符串的实例详解
Oct 11 #Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 #jQuery
详解vue mint-ui源码解析之loadmore组件
Oct 11 #Javascript
JS随机排序数组实现方法分析
Oct 11 #Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 #Javascript
jQuery中过滤器的基本用法示例
Oct 11 #jQuery
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 #Javascript
You might like
隐藏你的.php文件的实现方法
2007/03/19 PHP
使用php清除bom示例
2014/03/03 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
php中错误处理操作实例分析
2019/08/23 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
layui文件上传实现代码
2017/05/20 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
python无序链表删除重复项的方法
2020/01/17 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
网上卖盒饭创业计划书范文
2014/02/07 职场文书
法律进企业活动方案
2014/03/04 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
陕西导游词
2015/02/04 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python