需求:h5和小程序预览图片需要有当前第几张标识

1.小程序直接使用api:uni.previewImage

2.h5使用轮播图写一个组件

javascript 复制代码
<template>
    <view class="custom-image-preview" v-if="visible">
      <view class="overlay"></view>
      <swiper class="swiper" :current="currentIndex" @change="onSwiperChange">
        <swiper-item v-for="(image, index) in images" :key="index" @click="closePreview">
          <image style="width: 100%;height: 100%;" :src="image" mode="aspectFit" class="preview-image" :show-menu-by-longpress="true"></image>
        </swiper-item>
      </swiper>
      <view class="index-indicator">
        {{ currentIndex + 1 }} / {{ images.length }}
      </view>
    </view>
  </template>
  
  <script>
  export default {
    props: {
      images: {
        type: Array,
        required: true,
      },
      current: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        visible: false,
        currentIndex: 0,
      };
    },
    methods: {
      openPreview() {
        this.currentIndex = this.current;
        this.visible = true;
      },
      closePreview() {
        this.visible = false;
        this.$emit('close');
      },
      onSwiperChange(e) {
        this.currentIndex = e.detail.current;
      },
    },
    mounted() {
      this.openPreview();
    },
  };
  </script>
  
  <style scoped>
  .custom-image-preview {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
  }
  
  .swiper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .preview-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .index-indicator {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 24px;
    background: rgba(0, 0, 0, 0.5);
    padding: 8px 16px;
    border-radius: 16px;
  }
  </style>
相关推荐
一只一只妖2 小时前
突发奇想,还未实践,在Vben5的Antd模式下,将表单从「JS 配置化」改写成「模板可视化」形式(豆包版)
前端·javascript·vue.js
2501_915918412 小时前
uni-app 项目 iOS 上架踩坑经验总结 从证书到审核的避坑指南
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者82 小时前
iOS 上架 uni-app 流程全解析,从打包到发布的完整实践
android·ios·小程序·https·uni-app·iphone·webview
说私域3 小时前
“互联网 +”时代商业生态变革:以开源 AI 智能名片链动 2+1 模式 S2B2C 商城小程序为例
人工智能·小程序·开源
悟能不能悟4 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶4 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
gnip6 小时前
js上下文
前端·javascript
中草药z6 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)6 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js