JSAPI

  • Since 8.6

    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);
    
    名称类型描述必选默认值版本
    imagesarray图片数组Y
    ustring图片urlN‘’
    tstring缩略图urlN
    initint默认显示第几张N
    fnfunctionAPI调用结果的回调N

    出参

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