MUI 模板

常用的这里都有

图片预览(div模式)

在图文详情页面中,经常会存在点击能查看图片大图并且左右滑动切换的需求,mui 为此提供了相应的示例。

<div class="mui-content-padded">
 <p>这是一个图文详情页面</p>
 <p>
   <img src="../images/yuantiao.jpg" data-preview-src="" data-preview-group="1" />
 </p>
 <p>这是第二张图</p>
 <p>
   <img src="../images/muwu.jpg" data-preview-src="" data-preview-group="1" />
 </p>
 <p>这是第三张图</p>
 <p>
   <img src="../images/shuijiao.jpg" data-preview-src="" data-preview-group="1" />
 </p>
</div>

同时需要引入js插件,并在页面初始化图片预览函数

<script src="../js/mui.min.js"></script>

<script src="../js/mui.zoom.js"></script>
<script src="../js/mui.previewimage.js"></script>
<script type="text/javascript">
	// 初始化previewImage
	mui.previewImage();
</script>

示例说明:

注意DOM结构中 img标签的data-preview-src属性以及data-preview-group是必填属性。data-preview-src为点击放大时预览图片的链接,默认可为空,为空时则是当前图片的链接;data-preview-group将图片声明为同一组预览图。

图片预览(native模式)

在plus环境下(注:在浏览器环境下不支持),我们还提供一种使用5+ runtime提供的原生图片预览控件实现图片预览

查看详细文档原生版本图片预览使用教程

列表到详情最佳实践

本示例主要特点:在plus环境下(注:不支持浏览器环境),点击列表瞬间打开详情页,并且详情页已渲染完毕,效果堪比原生App!

效果如下:

查看详细文档列表到详情最佳实践

索引列表

该示例提供类似通讯录或者城市选择列表页面,以首字母区分,并提供搜索条件,分为展示模式和选择模式

展示模式

获取数据列表,并渲染成如下模式,支持搜索。效果如下:



选择模式

获取数据列表,并渲染成如下模式,支持搜索,支持选择,点击完成,获取当前选择的内容。效果如下:





获取源码途径

懒加载

延迟加载:页面初始化时,暂不加载处于屏幕可见区域之外的图片。这样做的几大好处:

  • 加快页面渲染速度
  • 提升页面滚动性能
  • 默认不下载屏幕外的图片,减少网络流量
效果展示

实现方法
<ul id="list" class="mui-table-view mui-table-view-chevron"></ul>

// 引入插件js
<script src="js/mui.min.js "></script>
<script src="js/mui.lazyload.js"></script>
<script src="js/mui.lazyload.img.js"></script>

<script>
mui.init();
var createFragment = function(count) {
	// 创建列表 逻辑自定义
	return fragment;
};

(function($) {
 var list = document.getElementById("list"); 

 // 添加列表
 list.appendChild(createFragment(50));

 $('#list').imageLazyload({
  placeholder: 'images/60x60.gif'  // 配置占位图片
 });

})(mui);
</script>

手势锁屏

实现手势图案锁屏

代码实现
<div id='holder' class="mui-locker" data-locker-options='{"ringColor":"rgba(210,210,210,1)","fillColor":"#ffffff","pointColor":"rgba(0,136,204,1)","lineColor":"rgba(0,136,204,1)"}' data-locker-width='300' data-locker-height='300'></div>
 
//需要引入第三方js
<script src="js/mui.locker.js"></script>
	

示例说明:data-locker-options自定义按钮选中颜色以及线条颜色,data-locker-width手势图案宽度,data-locker-height手势图案高度