最接近原生APP体验的高性能前端框架-MUI

时间：2021-08-07 20:25:12

  前  言

轻量，原生UI,流畅体验，是MUI的三个特征。

 

1. 新手指南

快速体验

1. 下载Hello mui App

下载已打包好的Hello mui 手机app，直接在手机上体验mui的控件UI及能力展示  http://dcloud.io/hellomui/

2. 创建Hello mui工程

可从https://www.dcloud.io下载Hbuilder，选择新建“移动APP”，并选择“Hello MUI”工程模板，创建工程；然后通过数据线将手机连接上电脑，点击运行，就可以在手机上体验MUI的各项能力。

快速构建页面

3步搭好页面主框架

1. 新建含mui的HTML文件

在Hbuilder中，新建HTML文件，选择”含mui的HTML“模板，可以快速生成mui页面模板，该模板默认处理了mui的js、css资源引用。

2.输入mheader

顶部标题栏是每个页面都必需的内容，在Hbuilder中输入mheader，可以快速生成顶部导航栏。

3.输入mbody

除顶部导航、底部选项卡两个控件之外，其它控件都建议放在.mui-content控件内，在Hbuilder中输入mbody，可快速生成包含.mui-content的代码块。

4.完整代码块请参考

snippet

2.原生UI

以iOS 7为基础，补充部分Android特有控件

下面给大家介绍几个常用控件

accordion（折叠面板）

折叠面板从二级列表中演化而来，dom结构和二级列表类似，如下：

 最接近原生APP体验的高性能前端框架-MUI
 
<ul class="mui-table-view">

        <li class="mui-table-view-cell mui-collapse">

            <a class="mui-navigate-right" href="#">面板1</a>

            <div class="mui-collapse-content">

                <p>面板1子内容</p>

            </div>

        </li>

    </ul>

　　

可以在折叠面板中放置任何内容；折叠面板默认收缩，若希望某个面板默认展开，只需要在包含.mui-collapse类的li节点上，增加.mui-active类即可；mui官网中的方法说明，使用的就是折叠面板控件

list（列表）

1、普通列表

列表是常用的UI控件，mui封装的列表组件比较简单，只需要在ul节点上添加.mui-table-view类、在li节点上添加.mui-table-view-cell类即可，如下为示例代码

<ul class="mui-table-view">

    <li class="mui-table-view-cell">Item 1</li>

    <li class="mui-table-view-cell">Item 2</li>

    <li class="mui-table-view-cell">Item 3</li>

</ul>

　　

图片轮播

图片轮播继承自slide插件，因此其DOM结构、事件均和slide插件相同；

DOM结构

默认不支持循环播放，DOM结构如下：

<div class="mui-slider">

  <div class="mui-slider-group">

    <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>

    <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>

    <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>

    <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>

  </div>

</div>

　　

假设当前图片轮播中有1、2、3、4四张图片，从第1张图片起，依次向左滑动切换图片，当切换到第4张图片时，继续向左滑动，接下来会有两种效果：

  • 支持循环：左滑，直接切换到第1张图片；
  • 不支持循环：左滑，无反应，继续显示第4张图片，用户若要显示第1张图片，必须连续向右滑动切换到第1张图片；
当显示第1张图片时，继续右滑是否显示第4张图片，是同样问题；这个问题的实现需要通过.mui-slider-loop类及DOM节点来控制；

若要支持循环，则需要在.mui-slider-group节点上增加.mui-slider-loop类，同时需要重复增加2张图片，图片顺序变为：4、1、2、3、4、1，代码示例如下：

<div class="mui-slider">

  <div class="mui-slider-group mui-slider-loop">

    <!--支持循环，需要重复图片节点-->

    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div>

    <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>

    <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>

    <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>

    <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>

    <!--支持循环，需要重复图片节点-->

    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>

  </div>

</div>

　　

概述

为实现下拉刷新功能，大多数 H5 框架都是通过 DIV 模拟下拉回弹动画，在低端 android 手机上，DIV 动画经常出现卡顿现象（特别是图文列表的情况); mui 通过使用原生 webview 下拉刷新解决这个 DIV 动画的卡顿问题，并且拖动效果更加流畅；

这里提供两种模式的下拉刷新，以适用不同场景：

单 webview 模式

  • 动画原理：

    下拉刷新时，触发的是原生下拉刷新控件，而整个webview位置不会发生变化，所以不会在拖动过程中发生DOM重绘，当控件拖动到一定位置触发动态加载数据以及刷新操作。此模式下拉刷新，相比双webview 模式，不创建额外 webview，性能更优。

  • 使用方法：

    mui 初始化时设置pullRefresh各项参数，与双 webview 模式的子页面设置是一样的。

    说明：
    1. DOM结构无特殊要求，只需要指定一个下拉刷新容器标识即可
mui.init({

  pullRefresh : {

    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等

    down : {

      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式

      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色

      height:'50px',//可选,默认50px.下拉刷新控件的高度,

      range:'100px', //可选 默认100px,控件可下拉拖拽的范围

      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置

      auto: true,//可选,默认false.首次加载自动上拉刷新一次

      callback :pullfresh-function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；

    }

  }

});

　　

模式说明：
    • 优点：
      • 性能更优，体现在两点：
        1. 相比双webview，不创建额外子 webview 性能消耗更少
        2. 下拉拖动过程中不会发生重绘，也减少了性能消耗
    • 缺点：
      • 目前仅支持‘cricle’样式以及该样式的颜色自定义

双 webview 模式

  • 动画原理：

    使用双 webview 模式的下拉刷新，创建一个子 webview 添加列表；拖动时，拖动的是一个完整的 webview，避免了类似 DIV 拖动流畅度不好的问题，回弹动画使用原生动画；在 iOS 平台，H5 的动画已经比较流畅，故依然使用 H5 方案。两个平台实现虽有差异，但 mui 经过封装，可使用一套代码实现下拉刷新。

  • 使用方法：

    主页面内容比较简单，只需要创建子页面即可：

  • mui.init({
    
    subpages:[{
    
      url:pullrefresh-subpage-url,//下拉刷新内容页面地址
    
      id:pullrefresh-subpage-id,//内容页面标志
    
      styles:{
    
        top:subpage-top-position,//内容页面顶部位置,需根据实际页面布局计算，若使用标准mui导航，顶部默认为48px；
    
        .....//其它参数定义
    
      }
    
    }]
    
});

    　　

iOS平台的下拉刷新，使用的是 mui 封装的区域滚动组件， 为保证两个平台的 DOM 结构一致，内容页面需统一按照如下 DOM 结构构建：
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">

  <div class="mui-scroll">

    <!--数据列表-->

    <ul class="mui-table-view mui-table-view-chevron">

    </ul>

  </div>

</div>

　　

其次，通过 mui.init 方法中 pullRefresh 参数配置下拉刷新各项参数，如下：
mui.init({

  pullRefresh : {

    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等

    down : {

      height:50,//可选,默认50.触发下拉刷新拖动距离,

      auto: true,//可选,默认false.首次加载自动下拉刷新一次

      contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容

      contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容

      contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容

      callback :pullfresh-function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；

    }

  }

});

　　

模式说明：
    • 优点：
      • 可自定义下拉刷新样式，更改文字等等.参考关于自定义下拉刷新样式问答
    • 缺点：
      • 相比单 webview，性能消耗更大，不过都比 div 模式的要好用
      • DOM结构需要统一配置
本文只写了一部分常用控件，所以不是很全面，大家可以参考官方文档去详细了解细节。

相关文章