在图文详情页面中，经常会存在点击能查看图片大图并且左右滑动切换的需求，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将图片声明为同一组预览图。
在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手势图案高度
EChart 图表
这是mui集成百度ECharts的图表示例，ECharts的详细用法及 API 请参考其官方网站: //echarts.baidu.com
