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>
AlipayJSBridge.call('imageViewer', {
images: {u, t}, init
}, fn);
| 名称 | 类型 | 描述 | 必选 | 默认值 | 版本 |
|---|---|---|---|---|---|
| images | array | 图片数组 | Y | ||
| u | string | 图片url | N | ‘’ | |
| t | string | 缩略图url | N | ||
| init | int | 默认显示第几张 | N | ||
| fn | function | API调用结果的回调 | N |
回调函数带入的参数result: {error, success}