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 动态设置已知select的option的value值的代码
Dec 16 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 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
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
浅析javascript的return语句
2015/12/15 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
Bootstrap插件全集
2016/07/18 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
Python笔试面试题小结
2019/09/07 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
Python LMDB库的使用示例
2021/02/14 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
J2EE中的容器都包括哪些
2013/08/21 面试题
前台文员个人求职信范文
2014/01/05 职场文书
伊琍体标语
2014/06/25 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript
golang为什么要统一错误处理
2022/04/03 Golang
Python之matplotlib绘制饼图
2022/04/13 Python