MUI组件（4）

作者: 白晓明 | 来源:发表于2019-04-14 17:13 被阅读19次

MUI组件（4）
muicss 转载dcloud.io
mui组件js API 转载dcloud.io
MUI开发需要注意的“点”
mui中图片手势缩放功能的实现
vue移除严格模式不生效问题
MUI组件（2）
MUI组件（1）
MUI组件（3）
MUI组件（5）

slide（轮播组件）

轮播组件是MUI提供的核心组件之一，基于轮播组件衍生出了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格等组件。

<!--使用msl快捷生成轮播组件-->
<div class="mui-slider">
  <div class="mui-slider-group">
    <!--第一个内容区容器-->
    <div class="mui-slider-item">
      <!-- 具体内容 -->
    </div>
    <!--第二个内容区-->
    <div class="mui-slider-item">
      <!-- 具体内容 -->
    </div>
  </div>
</div>

提高可拖动式选项卡页面加载速度，页面加载时，仅显示第一个选项卡的内容，后面的在切换时动态获取相应内容进行显示。

var item2Show = false,item3Show = false;//子选项卡是否显示标志
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
  if (event.detail.slideNumber === 1&&!item2Show) {
    //切换到第二个选项卡
    //根据具体业务，动态获得第二个选项卡内容；
    var content = ....
    //显示内容
    document.getElementById("item2").innerHTML = content;
    //改变标志位，下次直接显示
    item2Show = true;
  } else if (event.detail.slideNumber === 2&&!item3Show) {
    //切换到第三个选项卡
    //根据具体业务，动态获得第三个选项卡内容；
    var content = ....
    //显示内容
    document.getElementById("item3").innerHTML = content;
    //改变标志位，下次直接显示
    item3Show = true;
  }
});

案例：轮播

gallery（图片轮播）

图片轮播继承自 slide 组件，因此其DOM结构和事件与 slide 组件相同。

<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>

MUI内置了图片轮播组件，可以通过设定是否自动轮播及轮播周期。

//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
});

//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider().gotoItem(index);//跳转到第index张图片，index从0开始；

注：若轮播组件内容是JS动态生成，则需要在动态生成完整DOM后，手动调用图片轮播的初始化方法。

//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
});

案例：图片轮播

scroll（区域滚动）

<div class="mui-scroll-wrapper">
    <div class="mui-scroll">
        <!--这里放置真实显示的DOM内容-->
    </div>
</div>

注：区域滚动组件默认为 absolute 定位，全屏显示。在使用过程中，需要手动设置滚动区域的位置（top 和 height）。若使用区域滚动组件，需要手动初始化 scroll 组件。

常用配置项：

scroll.options

options = {
 scrollY: true, //是否竖向滚动
 scrollX: false, //是否横向滚动
 startX: 0, //初始化时滚动至x
 startY: 0, //初始化时滚动至y
 indicators: true, //是否显示滚动条
 deceleration:0.0006, //阻尼系数,系数越小滑动越灵敏
 bounce: true //是否启用回弹
}
//初始化scroll组件
mui('.mui-scroll-wrapper').scroll({
    deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});

滚动到特定位置

//xpos：要在窗口文档显示区左上角显示文档的x坐标
//ypos：要在窗口文档显示区左上角显示文档的y坐标
//duration：滚动时间周期，单位是毫秒
scrollTo(xpos, ypos, duration)

//快速滚动到该区域顶部
mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);//100毫秒滚动到顶

滚动到底部位置

//duration：滚动时间周期，单位是毫秒
scrollToBottom(duration)

横向滚动

横向滚动只需要在 scroll 组件基础上添加 mui-slider-indicatorcode mui-segmented-control mui-segmented-control-inverted 这三个样式（给子元素添加mui-control-item 可加大文字间距）。

<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
    <div class="mui-scroll">
        <a class="mui-control-item mui-active">
            推荐
        </a>
        <a class="mui-control-item">
            热点
        </a>
        <a class="mui-control-item">
            北京
        </a>
        <a class="mui-control-item">
            社会
        </a>
        <a class="mui-control-item">
            娱乐
        </a>
        <a class="mui-control-item">
            科技
        </a>
    </div>
</div>

横向滚动

offcanvas（侧滑菜单）
MUI提供了两种侧滑导航实现：webview模式和div模式。

webview 模式

主页面和菜单内容在不同的 webview 中，两个页面根据内容需要分别组织DOM结构，其优点如下：
· 菜单内容是单独的 webview，因此可以被复用。
· 菜单区域的滚动不影响主界面，因此可使用原生滚动。
缺点
· 不支持跟随手指拖动。
· 交互需要使用 自定义事件 实现跨 webview 通讯。

div模式

主页面和菜单内容在同一个webview下，嵌套在特定结构的div中，通过div的移动动画模拟菜单移动，优点如下：
· 支持跟随手指拖动；
· 可通过JS轻松实现两者交互。
缺点
· 不支持菜单内容复用；
· div 区域滚动，内容较多会出现卡顿。
div 模式四种动画效果
· 主界面移动、菜单不动

<!-- 主界面移动、菜单不动 -->
<div class="mui-off-canvas-wrap mui-draggable">
  <!-- 菜单容器 -->
  <aside class="mui-off-canvas-left" id="offCanvasSide">
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <!-- 菜单具体展示内容 -->
            
      </div>
    </div>
  </aside>
  <!-- 主页面容器 -->
  <div class="mui-inner-wrap">
    <!-- 主页面标题 -->
    <header class="mui-bar mui-bar-nav">
      <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"  href="#offCanvasSide" ></a>
      <h1 class="mui-title">标题</h1>
    </header>
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-phone"></span>
            <span class="mui-tab-label">电话</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-email"></span>
            <span class="mui-tab-label">邮件</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">设置</span>
        </a>
    </nav>
    <div class="mui-content mui-scroll-wrapper">
      <div class="mui-scroll">
        <!-- 主界面具体展示内容 -->
            
      </div>
    </div> 
    <div class="mui-off-canvas-backdrop"></div>
  </div> 
</div>

主界面移动，菜单不动

· 主界面不动，菜单移动

<!-- 主界面不动、菜单移动 -->
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
  <!-- 菜单容器 -->
  <aside class="mui-off-canvas-left" id="offCanvasSide">
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <!-- 菜单具体展示内容 -->
        
      </div>
    </div>
  </aside>
  <!-- 主页面容器 -->
  <div class="mui-inner-wrap">
    <!-- 主页面标题 -->
    <header class="mui-bar mui-bar-nav">
      <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
      <h1 class="mui-title">标题</h1>
    </header>
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-phone"></span>
            <span class="mui-tab-label">电话</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-email"></span>
            <span class="mui-tab-label">邮件</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">设置</span>
        </a>
    </nav>
    <div class="mui-content mui-scroll-wrapper">
      <div class="mui-scroll">
        <!-- 主界面具体展示内容 -->
        
      </div>
    </div>  
    <div class="mui-off-canvas-backdrop"></div>
  </div>
</div>

主界面不动，菜单动

· 主界面、菜单同时移动

<!-- 主界面菜单同时移动 -->
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable">
    <!-- 主页面容器 -->
    <div class="mui-inner-wrap">
        <!-- 菜单容器 -->
        <aside class="mui-off-canvas-left" id="offCanvasSide">
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <!-- 菜单具体展示内容 -->
                    
                </div>
            </div>
        </aside>
        <!-- 主页面标题 -->
        <header class="mui-bar mui-bar-nav">
            <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
            <h1 class="mui-title">标题</h1>
        </header>
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item">
                <span class="mui-icon mui-icon-phone"></span>
                <span class="mui-tab-label">电话</span>
            </a>
            <a class="mui-tab-item">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">邮件</span>
            </a>
            <a class="mui-tab-item">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">设置</span>
            </a>
        </nav>
        <!-- 主页面内容容器 -->
        <div class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
                <!-- 主界面具体展示内容 -->
                
            </div>
        </div>
     <div class="mui-off-canvas-backdrop"></div>
    </div>
</div>

主界面、菜单同时移动

· 缩放式侧滑

<!-- 缩放式侧滑（类手机QQ） -->
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable mui-scalable">
  <!-- 菜单容器 -->
  <aside class="mui-off-canvas-left mui-transitioning" id="offCanvasSide">
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <!-- 菜单具体展示内容 -->
        
      </div>
    </div>
  </aside>
  <!-- 主页面容器 -->
  <div class="mui-inner-wrap mui-transitioning">
    <!-- 主页面标题 -->
    <header class="mui-bar mui-bar-nav">
      <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
      <h1 class="mui-title">标题</h1>
    </header>
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-phone"></span>
            <span class="mui-tab-label">电话</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-email"></span>
            <span class="mui-tab-label">邮件</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">设置</span>
        </a>
    </nav>
    <div class="mui-content mui-scroll-wrapper">
      <div class="mui-scroll">
        <!-- 主界面具体展示内容 -->
        
      </div>
    </div>  
    <div class="mui-off-canvas-backdrop"></div>
  </div>
</div>

缩放式侧滑

JS API

MUI支持多种方式操作 div 模式的侧滑菜单：

在界面上拖动操作；
点击含有 mui-action-menu 样式的控件；
Android 手机按 menu 键
通过JS API触发

//两种调用方式
mui('.mui-off-canvas-wrap').offCanvas('show');
//或者
mui('.mui-off-canvas-wrap').offCanvas().show();

可调用方法

方法名	作用
`show()`	显示
`close()`	隐藏
`toggle()`	切换

事件监听

事件名	作用
`shown`	显示
`hidden`	隐藏

document.querySelector('.mui-off-canvas-wrap').addEventListener('shown',function (event) {
    //...
})
//可以通过isShown()方法判断是否为显示状态
//其可以传递 direction（方向）参数进而可以判断左右侧滑
mui('.mui-off-canvas-wrap').offCanvas().isShown();

案例：

参考文档

MUI官方文档

上一章	下一章

MUI组件（4）
slide（轮播组件）轮播组件是MUI提供的核心组件之一，基于轮播组件衍生出了图片轮播、可拖动式图文表格、可拖动...
muicss 转载dcloud.io
mui组件通用CSS类 color(颜色) mui中组件以iOS 7为基础，补充部分Android特有控件，颜色值...
mui组件js API 转载dcloud.io
mui组件JS API 变量类型判断：mui.type() 获取当前时间戳：mui.now() 解析的JSON字符...
MUI开发需要注意的“点”
1. 所有固定栏组件（包含 .mui-bar 属性）需要放在有 .mui-content属性的组件之前。如：顶...
mui中图片手势缩放功能的实现
MUI框架，要实现手势缩放图片，可以使用imageviewer组件来实现。代码很简单：引入css： mui.im...
vue移除严格模式不生效问题
环境：使用vue-cli构建的项目使用方法参考问题：使用mui组件时引入mui.js时用到caller,cal...
MUI组件（2）
cardview（卡片视图）注：卡片视图主要有页眉、内容区、页脚三部分组成。 checkbox（复选框）注：复...
MUI组件（1）
accordion(折叠面板) actionsheet（操作表） badge（数字角标）注：数字角标一般和其他控...
MUI组件（3）
grid（栅格） MUI提供了非常简单实用的 12 列响应式栅格系统。栅格参数定义 mui-col-sm-6 ...
MUI组件（5）
popver（弹出菜单）可以通过指定锚点元素，来自动识别处理弹出菜单 dialog（对话框）注：MUI会根据 ...

MUI组件（4）

常用配置项：

滚动到特定位置

滚动到底部位置

横向滚动

webview 模式

div模式

JS API

可调用方法

事件监听

案例：

参考文档

相关文章

MUI组件（4）

muicss 转载dcloud.io

mui组件js API 转载dcloud.io

MUI开发需要注意的“点”

mui中图片手势缩放功能的实现

vue移除严格模式不生效问题

MUI组件（2）

MUI组件（1）

MUI组件（3）

MUI组件（5）

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Java 杂谈

Java

っ碎片化代码

程序员