mui中图片手势放大缩小功能

原创 amy_xiaozhu 随笔 MUI 291阅读 2017-12-25 11:06:35 举报

用mui框架开发项目时,有一个需求就是图片需要有手势放大缩小功能,查了下,mui中有个mui.zoom.js只要引入,然后再加上对应的布局,并且初始化一下便可直接使用
第一步,在页面中引入mui.zoom.js
第二步,如果要有这样的功能,布局需要:
<div class='mui-zoom-wrapper'>
<div class='mui-zoom-scroller'>
<img class='mui-zoom' src='1.jpg' />
</div>
</div>
第三步,在页面js中
mui.init({
gestureConfig: {
pinch: true,
doubletap: true
}
});
mui('.mui-zoom-wrapper').zoom(); //初始化
如果需要调整放大缩小的比例,需要到mui.zoom.js中找到
$.Zoom.defaults = {
speed: 300,
maxZoom: 3,
minZoom: 1, // 将minZoom的值改成小数 ,就可以在原大上缩小了

};

目前碰到有个问题,就是在android系统上如果图片放大几次后,整个app会卡住,但是在iOS上没有这个问题,不知道是不是和手动轮播一起导致的问题,以待解决~~~

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复