9***@qq.com
9***@qq.com
  • 发布:2017-03-28 11:54
  • 更新:2017-04-01 18:16
  • 阅读:3698

mui.imageViewer 可以分组显示照片

分类:MUI

我看给的例子中(chat.html)有用到这个组件 ,因为项目中用到了分组这个概念,很遗憾发现没有提供该功能。看到另外的一个例子imageviewer.html中用到了previewimage组件,里面可以设置data-preview-group属性,可以分组,但是 不太清楚 怎么动态的更新这些照片,因为页面中有下拉刷新和上拉加载更多,里面的代码都是拼接的,所以需要动态初始化和更新。所以就不太明白怎么做了,有人遇到过吗?期待大家的帮助。。。

2017-03-28 11:54 负责人:无 分享
已邀请:
Trust

Trust - 少说废话

mui.init();  
mui.previewImage();  
var html = '<div class="mui-content-padded">' +  
    '<p>这是图片放大预览示例,点击如下图片体验全屏预览功能</p>' +  
    '<p><img src="../images/yuantiao.jpg" data-preview-src="" data-preview-group="2" /></p>' +  
    '<p>图片全屏后,双击或双指缩放均可对图片进行放大、缩小操作,左右滑动可查看同组(data-preview-group相同的图片为一组)其它图片,点击会关闭预览</p>' +  
    '<p><img src="../images/muwu.jpg" data-preview-src="" data-preview-group="2" /></p>' +  
    '<p>第三张图片,纯粹为了占位: </p>' +  
    '<p><img src="../images/shuijiao.jpg" data-preview-src="" data-preview-group="2" /></p></div>';  
var content = document.querySelector('.mui-content');  
content.innerHTML += html;

初始化以后,按照规定的结构添加即可。

  • 9***@qq.com (作者)

    我是说 图片浏览 就是单击查看大图,类似于微信的那种。 你的这个是对图片的懒加载

    2017-04-01 18:09

  • 9***@qq.com (作者)

    感觉这个previewImage 左右慢慢滑动起来 不太流畅,有什么可以改善的地方吗?

    2017-04-10 17:58

该问题目前已经被锁定, 无法添加新回复