bilibili小程序

使用小贴士

bl.previewImage

在新页面中全屏预览图片。预览的过程中用户可以进行保存图片等操作。

参数说明

Object object

属性类型默认值必填说明版本
urlsarray.<string>是需要预览的图片链接列表 
currentstringurls[0]否当前显示图片的链接，不填则默认为 urls 的第一张 
descstring''否底部描述2.2.0
bottomConfigobject否最底部的展示区域配置，等分成四块。对象的key表示对应第几个区块，一共4个，从左到右对应part1 part2 part3 part4，每个key的value对应一个对象，可传两个key：iconPath为图标url，desc为图标后面跟着的描述2.2.0
rightConfigobject否最后一张图片再向左滑动时出现的展示配置（只支持配置图片），imgUrl为图片链接（可接受http,file协议，和相对路径（需放在项目根目录的static文件夹下，写法为 /static/xxx））。width height分别对应图片宽和高 int类型。callback（function类型）为滑到一定距离时松手后的回调，传参有updateData(function类型，传参可参考bottomConfig)，更新底部按钮数据；closePreviewImage(function类型，无需传参)，表示关闭当前预览图片组件2.2.0
onBottomClickfunction否底部按钮点击后的回调，回调的参数如下：imgIndex(int类型，从0开始)，表示点击的第几张图片；part(int类型，从1开始)，表示点击第几个按钮；updateData(function类型，传参可参考bottomConfig)，更新底部按钮数据；closePreviewImage(function类型，无需传参)，表示关闭当前预览图片组件2.2.0
onClosefunction否关闭图片预览组件的回调函数2.2.0
successfunction否接口调用成功的回调函数 
failfunction否接口调用失败的回调函数 

Bug & Tip

  • Android 基础库版本 2.1.0（app5.44）因bug调用后会直接走fail回调，不打开预览组件。

示例

bl.previewImage({
    urls: ['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561632416802&di=9a506ffe971e3bd0712666bcc33da564&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4610b912c8fcc3cef70d70409845d688d53f20f7.jpg'
,'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561632497497&di=2c92ba75e08bc7eeb74c1d60074c58ff&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F0338cbe93580d5e6b0e89f25531541d455f66fda4a6a5-eVWQaf_fw658'],
    current: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561632497497&di=2c92ba75e08bc7eeb74c1d60074c58ff&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F0338cbe93580d5e6b0e89f25531541d455f66fda4a6a5-eVWQaf_fw658',
    desc: '描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述',
    bottomConfig: {
        part1: {
            iconPath: '/static/save.png',
            desc: '保存'
        },
        part3: {
            iconPath: '/static/comment.png',
            desc: '233'
        },
        part4: {
            iconPath: '/static/agree.png',
            desc: '12'
        }
    },
    onBottomClick(options) {
        var index = options.imgIndex;
        var part = options.part;
        console.log('imgIndex', index);
        console.log('part', part);

        if (part == 3) {
            options.updateData({
                bottom: {
                    part3: {
                        // 若只要更新desc，iconPath也需传，否则会将icon置空不展示
                        iconPath: '/static/comment.png',
                        desc: '100'
                    }
                    // 其他的part不需要更新则不传对应的key，传key了不给iconPath，desc赋值则会把icon和desc全部置空不展示
                }
            });
        }
        if (part == 4) {
            bl.navigateTo({
                url: '/pages/xxx'
            });
            options.closePreviewImage();
        }
    },
    rightConfig: {
        imgUrl: '/static/right.png',
        width: 50,
        height: 160,
        // 滑到最右触发的回调
        callback(options) {
            bl.navigateTo({
                url: '/pages/xxx'
            });
            // 关闭预览
            options.closePreviewImage();
        }
    },
    success: (res) => {
        
    },
    fail: (res) => {
        
    }
})
← bl.clearStorageSyncbl.saveImageToPhotosAlbum →