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 相关文章推荐
jQuery入门知识简介
Mar 04 Javascript
实测jquery data()如何存值
Aug 18 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
jsonp跨域请求详解
Jul 13 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 Javascript
手把手教你如何编译打包video.js
Dec 09 Javascript
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编写和读取XML的几种方式
2013/01/12 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
Angular2 组件交互实例详解
2017/08/24 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
新郎父亲婚宴答谢词
2014/01/11 职场文书
电子商务专业求职信
2014/03/08 职场文书
大学社团活动总结
2014/04/26 职场文书
社区戒毒工作方案
2014/06/04 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
超搞笑婚前保证书
2015/05/08 职场文书