首页 > 其他分享 >vue项目结合,vant 实现中轮播图中,点击图片放大图片

vue项目结合,vant 实现中轮播图中,点击图片放大图片

时间:2023-04-23 13:46:24浏览次数:48  
标签:index vue 轮播 vant 索引 切换 图片

思路:

  1. vant中提供函数 ImagePreview
  2. 给原每一个图片子元素设置点击事件,api中提供 initial-swipe 索引,拿到原图索引
  3. 设置change事件,保存大图切换的对应索引给到自己的 initial-swipe索引中
  4. 设置图片预览切换时,根据切换后的索引,设置原图的位置,大图原图同步
  5. 原图片 swipeTo(i) 切换到指定位置,

代码:

  <!-- 轮播图 -->
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        :initial-swipe="index" //自己定义的index值
        @change="onChange"
        ref="mySwipe"
      >
        <van-swipe-item
          v-for="item in imgList"
          :key="item"
          @click="onImgPreView"
        >
          <van-image 
            width="100vw" 
            height="3rem" 
            fit="contain" 
            :src="item" />
        </van-swipe-item>
      </van-swipe>

放大图片

    // 放大图片
    onImgPreView() {
      // 点击轮播图时,通过数据拿到当前索引,根据当前索引创建图片预览,设置默认图片
      const that = this;
      ImagePreview({
        images: this.imgList, //点击后的图片。
        startPosition: this.index, //index默认为0,提供的起始位置
        onChange(i) { 
          // 当图片预览切换时,根据切换后的索引,设置轮播图的位置
          that.$refs.mySwipe.swipeTo(i);
        },
      });
    },
   onChange(index) { //vant提供的索引值
      // 在轮播图切换时,将索引保存到数据中
      this.index = index;
   },

作者:王雅楠

标签:index,vue,轮播,vant,索引,切换,图片
From: https://www.cnblogs.com/DTCLOUD/p/17346297.html

相关文章

  • vue学习 第四天 css ---元素显示模式 display
     导学: 1)设置元素显示模式display2)block(块)、inline(行内)、inline-block(行内块)3)每一种元素模式的特点 1、元素显示模式:  独占一行 (块元素)和 共用一行(行内元素)HTML元素一般分为块元素和行内元素两个类型。 2、块元素:<h1>~<h6>、<p>、<div......
  • vue实现的常见的动画效果
    本文包括的动画:zoom-inzoom-in-leftzoom-in-rightzoom-in-topzoom-in-bottomzoom-in-center-xzoom-in-center-yslideslide-leftslide-rightslide-topslide-bottomzoom-in-left.ivy-zoom-in-left-enter-active,.ivy-zoom-in-left-leave-active{transition:all0.3sease;......
  • 可视化大屏的终极解决方案居然这么简单,vue-autofit一行全搞定!
    可视化大屏适配/自适应现状可视化大屏的适配是一个老生常谈的话题了,现在其实不乏一些大佬开源的自适应插件、工具但是我为什么还要重复造轮子呢?因为目前市面上适配工具每一个都无法做到完美的效果,做出来的东西都差不多,最终实现效果都逃不出白边的手掌心,可以解决白边问题的,要么太......
  • vue3 create-vue 开启vite自动验证eslint
    0.vue3 cli推荐新的构建工具vite,但没有yarnrundev后并不自动检测eslint规则,需要运行yarnruneslint1.添加组件即可 yarnadd vite-plugin-eslint--dev 2.在vite.config.js加入1import{fileURLToPath,URL}from'node:url'23import{defineConfig}......
  • 前端必须学会的vueh5布局瀑布流 简易通俗易懂 左右排版
    css简易版瀑布流布局通过v-if="index%2===0"v-if="index%2===1"进行判断显示左边右边左右瀑布流排版,在每一列中交替地排放元素。具体来说,可以通过对每一列进行编号,然后对奇数列和偶数列分别设置不同的样式来实现左右瀑布流排版。html<div><cl-pull-refreshv-model="isR......
  • ant design of vue的a-rang-picker时间控制既不能选今天以后的日期且开始时间跟结束时
    在项目中这个问题在困扰我,虽然我知道它是有一个Api是disableDate来控制时间的选择;但是只能够实现开始时间跟结束时间之间差不能超过3天。效果图接下来就是代码时间呀<a-col><a-form-model-itemlabel="任务时间范围"prop="priceRangeDate"><a-range-picker......
  • vue3 keep-alive实现tab页面缓存
    先上图 如何在我们切换tab标签的时候,缓存标签最后操作的内容,简单来说就是每个标签页中设置的比如搜索条件及结果、分页、新增、编辑等数据在切换回来的时候还能保持原样。看看keep-alive是如何实现该功能的。首先我们要了解keep-alive的基本使用。具体介绍请查看官方文档(htt......
  • vue 3.0 对应node 版本
    npmrundev我的版本v14.16.116.19.016.18.1node多版本管理工具https://blog.csdn.net/weixin_57844432/article/details/127788884failedtoloadconfigfromD:\ProFolder\hczhyq\slkj_custom_front\vite.config.tserrorwhenstartingdevserver:Error:Cannotfind......
  • vue 拖拽功能实现
    前言最新项目里使用到了拖拽的功能,查阅资料后,看到一篇关于拖拽的详细文章:https://www.cnblogs.com/xiaohuochai/p/5886618.html基于此,记录下vue实现拖拽的过程,以下是编写的示例demo效果图:设置拖拽时,需要拖拽的元素要设置draggable=true及元素是否可拖动。默认是draggab......
  • Vue设置默认加载页面,去掉地址栏#号
     {path:'/',component:Login,//想默认启动的页面},mode:"history"//去掉地址栏的#号 ......