imageViewer 图片预览器

imageViewer

imageViewer是一个native实现的图片查看组件

使用方法

AlipayJSBridge.call('imageViewer', {
  images: [{
    u: 'https://gw.alipayobjects.com/zos/rmsportal/TVIpxsgyWyvrUKHwOvPY.jpg',
    t: 'https://gw.alipayobjects.com/zos/rmsportal/BSccQoKEYEaKgUAGMkdr.jpg'
  }],
  init: 0
}, function(result) {
  console.log(result);
});

代码演示

基本功能

<h1>点击查看图片预览效果</h1>

<a href="#" class="btn read">开始预览</a>
<script>
function ready(callback) {
  // 如果jsbridge已经注入则直接调用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果没有注入则监听注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function() {
  document.querySelector('.read').addEventListener('click', function() {
    AlipayJSBridge.call('imageViewer',
    {
      images: [
        {u: 'https://gw.alipayobjects.com/zos/rmsportal/TVIpxsgyWyvrUKHwOvPY.jpg', t: ''},
        {u: 'https://gw.alipayobjects.com/zos/rmsportal/BSccQoKEYEaKgUAGMkdr.jpg', t: ''}
      ],
      init: 0
    },
    function(result) {
      console.log(result);
    });
  });
});
</script>

API

AlipayJSBridge.call('imageViewer', {
  images: {u, t}, init
}, fn);

出参

回调函数带入的参数result: {error, success}