更新记录

1.0.0（2020-03-15） 下载此版本

一款简单的图片预览

平台兼容性

该插件已停止维护，请使用官网的 uni.previewImage()

点击查看文档 uni.previewImage()

 // 预览图片
    uni.previewImage({
        current: "img1.png",
        urls: ['img1.png','img2.png','img3.png'],
        longPressActions: {
            itemList: ['发送给朋友', '保存图片', '收藏'],
            success: function(data) {
                console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
            },
            fail: function(err) {
                console.log(err.errMsg);
            }
        }
    });

一款简单的图片预览

使用方式

页面使用需在 script 中引用组件

import hxPreviewImg from "@/components/hx-preview-img/hx-preview-img.vue";
export default {
  components: { hxPreviewImg },
};

全局使用需在 main.js 中注册组件

import hxPreviewImg from "@/components/hx-preview-img/hx-preview-img.vue";
Vue.component("hx-preview-img", hxPreviewImg);

属性

使用例子

<hx-preview-img
  :list.sync="previewImgList"
  :current.sync="currentImg"
  :start.sync="PINum"
></hx-preview-img>

<button @click="previewImg(imgList[2],imgList)"></button>
button

data:{
    currentImg: '',
    previewImgList: [],
    PINum: 0,

    imgList: ['img1.png','img2.png','img3.png','img4.png']
}
methods:{
    //图片预览
    previewImg(imgSrc,list){
        this.currentImg = imgSrc
        this.previewImgList = list
        this.PINum++
    },
}

为方便交流，我创建了一个 QQ 群 954035921，有什么问题可以加群讨论