更新记录

1.0.2（2024-07-18） 下载此版本

• 调整 id 属性改为 imgId
• 新增 测试属性 showIndex（展示当前图片索引和总数，从1开始）

1.0.1（2024-04-08） 下载此版本

• 优化 删除未引用的依赖

1.0.0（2024-04-08） 下载此版本

• jade-image-preview 图片预览组件
• 使用uni_modules目录规范
• 目前兼容微信小程序、H5，其它平台未实际测试过

平台兼容性

jade-image-preview 图片预览组件

写插件不易，好用的话请5星好评，向身边朋友推荐吧ヾ(´▽‘)ﾉ。

注：本组件目前兼容微信小程序、H5，其它平台未实际测试过。

简单示例

<template>
    <view class="content">
        <view class="list" v-for="(item,index) in list" :key="index">
            <image class="image" :src="item.src" mode="widthFix" @tap="todetail(item)"></image>
        </view>
        <jade-image-preview
         v-if="preview"
         :id="img_id"
         :data="preData"
         @click="preview = false">
        </jade-image-preview>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                preview: false,
                img_id: '',
                preData: {}
            }
        },
        onLoad() {
            this.getList()
        },
        methods: {
            todetail(item) {
                this.img_id = item.id
                this.preview = true
            },
            getList(){
                this.list = [
                    {id: 1,src: '/static/logo.png'},
                    {id: 2,src: '/static/logo.png'},
                    {id: 3,src: '/static/logo.png'},
                    {id: 4,src: '/static/logo.png'},
                    {id: 5,src: '/static/logo.png'},
                    {id: 6,src: '/static/logo.png'},
                    {id: 7,src: '/static/logo.png'},
                    {id: 8,src: '/static/logo.png'},
                    {id: 9,src: '/static/logo.png'},
                    {id: 10,src: '/static/logo.png'}
                ]
                this.$nextTick(()=>{
                    this.preData = {
                        data: this.list,//数组长度
                        // current_page: 1, //是否分页
                    }
                })
            }
        }
    }
</script>

<style>
    .list{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .image{
        margin-top: 20rpx;
        width: 500rpx;
    }
</style>

属性介绍

事件介绍