基于ant design vue +swiper做的轮播放大功能

已于 2022-04-25 22:05:45 修改
阅读量1.8k 收藏
点赞数 1
文章标签： javascript vue 前端 html5
于 2022-04-22 15:07:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45304830/article/details/124346304
版权 
<template>
  <div class="goods-swiper-box" :style="{ width: boxWidth + 'px' }">
    <div
      class="image-box"
      :style="{
        width: boxWidth + 'px',
        height: boxHeight + 'px',
      }"
    >
      <van-swipe
        class="swiper"
        :autoplay="autoPlayFlag ? '' : 3000"
        @change="bigImgChange"
        :show-indicators="false"
        ref="topImageSwiper"
      >
        <van-swipe-item
          class="inner-image-box"
          :style="{
            width: boxWidth + 'px',
            height: boxHeight + 'px',
          }"
          v-for="(item, index) in imageList || ['', '']"
          :key="item.picID"
        >
          <div
            class="image-box-inner"
            :class="'box-image' + index"
            :key="item.picID"
            :style="{
              height: boxHeight + 'px',
              'line-height': boxHeight + 'px',
            }"
          >
            <img
              :src="item.picUrl"
              :class="'image' + index"
              alt=""
              :ref="'midelImg' + index"
              @mouseover="handOver"
              @mouseout="handOut"
            />
          </div>
        </van-swipe-item>
      </van-swipe>
      <div
        v-show="showMoveBox"
        class="swiper-shadow"
        :style="{
          width: boxWidth + 'px',
          height: boxHeight + 'px',
        }"
      >
        <div
          class="swiper-img-box"
          :style="bigBoxStyle"
          @mousemove="handMove"
          @mouseover="handOver"
          @mouseout="handOut"
        >
          <img :src="activeImgUrl" alt="" :style="bigBoxStyle" />
          <div
            class="shadow"
            :style="shandowStyle"
            @click="showImagePrivew"
          ></div>
          <div class="top-btn top-prev">
            <img src="@/assets/image/back.png" alt="" @click="topChange(-1)" />
          </div>
          <div class="top-btn top-next">
            <img src="@/assets/image/next.png" alt="" @click="topChange(1)" />
          </div>
        </div>
      </div>
      <div
        v-show="showMoveBox"
        class="big-image-box"
        :style="{
          width: boxWidth + 'px',
          height: boxHeight + 'px',
        }"
      >
        <!-- v-show="showMoveBox" -->
        <div class="inner-big-box" :style="bigBoxStyle">
          <img
            :src="activeImgUrl"
            alt=""
            :style="{ ...bigImgStyle, ...moveBigStyle }"
            class=""
          />
        </div>
      </div>
    </div>
    <div class="imgTip" :style="{ width: boxWidth + 'px' }">
      {{
        showMoveBox
          ? $t("detailPage.afterMoveTip")
          : $t("detailPage.beforeMoveTip")
      }}
    </div>
    <div class="small-image-box">
      <a-icon
        class="bottom-btn bottom-prev"
        type="left"
        :style="{
          height: boxHeight / smallMultiple + 'px',
          lineHeight: boxHeight / smallMultiple + 'px',
        }"
        @click="smallImgChange(-1)"
      />
      <swiper
        class="swiper"
        :options="swiperOption"
        ref="bottomImageSwiper"
        :style="{
          height: boxHeight / smallMultiple + 'px',
          width: boxWidth - 100 + 'px',
        }"
      >
        <swiper-slide
          v-for="(item, index) in imageList || ['', '']"
          :key="item.picID"
          :class="activeIndex == index ? 'small-img-active' : ''"
        >
          <img alt="" :src="item.picUrl" @click="jumpImage(index)" />
        </swiper-slide>

        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <a-icon
        class="bottom-btn bottom-next"
        @click="smallImgChange(1)"
        :style="{
          height: boxHeight / smallMultiple + 'px',
          lineHeight: boxHeight / smallMultiple + 'px',
        }"
        type="right"
      />
    </div>
  </div>
</template>

<script>
import { Carousel } from "ant-design-vue";
import swiperMixins from "./swiper-mixin";
export default {
  mixins: [swiperMixins],
  components: {
    "a-carousel": Carousel,
  },
};
</script>


<style lang="scss" scoped>
.goods-swiper-box {
  .image-box {
    background-color: #fff;
    position: relative;

    .swiper-shadow {
      background-color: #fff;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 90;
      &:hover .top-btn {
        display: block;
      }
      .top-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: none;
        z-index: 91;
      }
      .top-next {
        right: 0;
      }
      .swiper-img-box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        .shadow {
          position: absolute;
          background-color: gray;
          opacity: 0.4;
          z-index: 91;
          top: 0;
          left: 0;
          width: 100px;
          height: 100px;
        }
        img {
          height: 100%;
          width: 100%;
        }
      }
    }
    .inner-image-box {
      display: flex;
      border-radius: 8px;
      overflow: hidden;
      justify-content: center;
      align-content: center;
      background-color: #fff;
      .image-box-inner {
        position: absolute;
        height: auto;
        img {
          width: auto;
          height: auto;
          max-height: 100%;
          max-width: 100%;
        }
      }
    }

    .big-image-box {
      position: absolute;
      left: 105%;
      top: 0;
      display: flex;
      z-index: 999;
      justify-content: center;
      align-content: center;
      overflow: hidden;
      .inner-big-box {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        overflow: hidden;
        img {
          position: absolute;
        }
      }
    }
  }
  .imgTip {
    line-height: 32px;
    margin: 10px 0;
    text-align: center;
    width: 566px;
  }
  .small-image-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-content: center;
    .bottom-btn {
      width: 50px;
      text-align: center;
    }
    .small-img-active {
      border: 1px solid #333;
      border-radius: 4px;
    }
    ::v-deep .swiper-slide {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
      }
    }
  }
}
</style>

export default {
    props: {
        boxWidth: {
            type: Number,
            default:566
        },
        boxHeight: {
            type: Number,
            default:566
        },
        imageList: {
            type: Array,
            default: () => {
                return [
                    {
                        altPmt: "",
                        picID: "vueTest/1/produce-image_69f8c9a6-61c1-43e7-9456-234a2c6b2839_173031x.png",
                        picUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F09%2F20200209191658_jmu8V.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653210861&t=d6141f92fa3f93e6baeab3372266389f",
                        thnUrl: "",
                    },
                    {
                        altPmt: "",
                        picID: "vueTest/1/produce-image_69f8c9a6-61",
                        picUrl: "https://sqbucket-us.oss-us-west-1.aliyuncs.com/vueTest/1/produce-image_116b3911-0f27-4894-821f-940088ba0ea7_173031x.png",
                        thnUrl: "",
                    },
                   
                    {
                        altPmt: '',
                        picUrl: 'https://w.wallhaven.cc/full/j3/wallhaven-j379gy.png',
                        thnUrl: "",
                        picID: 2
                    },
                    {
                        altPmt: '',
                        picUrl: 'http://sqbucket-us.oss-us-west-1.aliyuncs.com/vueTest/1/produce-image_dd9c2786-459e-4904-bb12-f9f5507665b4_139686x.png',
                        thnUrl: "",
                        picID: 3
                    }, {
                        altPmt: '',
                        picUrl: 'http://sqbucket-us.oss-us-west-1.aliyuncs.com/vueTest/1/produce-image_73293336-fca8-4b67-9dee-253bd189a087_121645x.png',
                        thnUrl: "",
                        picID: 4
                    }
                ]
            }
        },
        multiple: {
            type: Number,
            default:2
    },
    smallMultiple: {
      type: Number,
      default:5
        },
        smallPosition: {
            type: String,
            default:'bottom'
        },
        swiperOption: {
            type: Object,
            default: () => {
                return {
                    slidesPerView: 4,
                  loop: false,
                    spaceBetween: 16,
                    prevButton: ".swiper-button-prev",
                  nextButton: ".swiper-button-next",
                  on: {
                    click: function (index) {
                  //  console.log(index)
                    }
                  }
                }
            }
          },
    },
    data() {
        return {
            swiperOptionTop: {
              spaceBetween: 30,
              centeredSlides: true,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
            },
          loop:true
              },
            activeIndex: 0,
            autoPlayFlag: false,
            activeImgUrl: "",
            showMoveBox: false,
            shandowStyle: {
                width: '283px',
                height: '283px',
                transform: null,
                x: 283,
                y:283,
            },
            bigBoxStyle: {
                width: '566px',
                height:'566px',  
            },
            bigImgStyle: {
                width: '1132px',
                height:'1132px',  
            },
          initPlace: null,
          outPlace:null,
            moveBigStyle: {
                top: 0,
                left: 0,
            },
            timer: null,
            imageLeftPosition: 0,
          imageEndPosition: 0,
          ratio: 1,
            l:0,
        }
  },
  watch: {
    // imageList: {
    //   handler(val) {
    //     var that = this;
    //   //   this.$nextTick(() => {
    //   //       this.$refs.topImageSwiper.resize()
    //   //  })
    //     setTimeout(() => {
    //       console.log("宝宝行业规范行业",that.$refs.topImageSwiper)
    //       that.$refs.topImageSwiper.resize()
    //     }, 500);
    //   },
    //   // deep: true,
    //   immediate:true
    // },

    },
    created () {
      this.activeImgUrl = this.imageList[this.activeIndex].picUrl;
  },
    methods: {
      handMove(e) {
        this.initPlace = this.$el.getElementsByClassName('swiper-img-box')[0].getBoundingClientRect();
            let objX = e.clientX - this.initPlace.left;
            let objY = e.clientY - this.initPlace.top;
            // 计算初始的遮罩左上角的坐标
            let maskX = objX - this.shandowStyle.x/this.multiple;
            let maskY = objY -  this.shandowStyle.y/this.multiple;
            // 判断是否超出界限,并纠正
            maskY = maskY < 0 ? 0 : maskY;
            maskX = maskX <0 ? 0 : maskX;
            if (maskY + this.shandowStyle.y >= this.initPlace.height) {
              maskY = this.initPlace.height - this.shandowStyle.y;
            }
            if (maskX + this.shandowStyle.x >= this.initPlace.width) {
              maskX = this.initPlace.width - this.shandowStyle.x
            }
            // 遮罩移动
        this.shandowStyle.transform = `translate(${maskX}px, ${maskY}px)`;
            // 背景图移动
            this.moveBigStyle.left = - maskX * this.multiple + "px";
            this.moveBigStyle.top = - maskY * this.multiple +"px";
      },
      handOut() {
       this.showMoveBox = false;
     this.autoPlayFlag = false;
     },
      handOver() {
            this.getWidthAndHeight();
            this.showMoveBox = true;
            this.autoPlayFlag = true;
       },
      bigImgChange(index) {
        this.activeIndex = index;
        this.activeImgUrl = this.imageList[this.activeIndex].picUrl;
      },
      getWidthAndHeight() {
        this.ratio = this.$refs['midelImg' + this.activeIndex][0].naturalWidth / this.$refs['midelImg' + this.activeIndex][0].naturalHeight;
        let width = 0, height = 0;
        if (this.ratio == this.boxWidth/this.boxHeight) {
          height = this.boxHeight;
          width = this.boxWidth;
        } else if (this.ratio < this.boxWidth/this.boxHeight) {
          height = this.boxHeight;
          width = this.boxHeight * this.ratio;
        } else {
          height = this.boxWidth / this.ratio;
          width = this.boxWidth;
        }
        this.bigBoxStyle = {
          width:width+'px',
          height:height+"px"
        }
        this.shandowStyle = {
          width:width/this.multiple+'px',
          height:height/this.multiple + "px",
          transform: null,
          x: width/this.multiple,
         y:height/this.multiple
        },
          this.bigImgStyle = {
          width: width * this.multiple + 'px',
           height:height*this.multiple+'px'
          }
      },
      topChange(val) {
        if (val == -1) {
          this.$refs.topImageSwiper.prev()
        } else {
          this.$refs.topImageSwiper.next()
        }
      },
      smallImgChange(val) {
        if (val == -1) {
          this.$refs.bottomImageSwiper.$swiper.slidePrev()
        } else {
          this.$refs.bottomImageSwiper.$swiper.slideNext()
        }
      },
      jumpImage(index) {
        this.activeIndex = index;
        this.$refs.topImageSwiper.swipeTo(index)
      },
      showImagePrivew() {
        this.$emit('showImagePrivew', this.activeIndex)
      }
    }
  
}
小蜗蜗有头发
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端滑动切换组件封装 vue-swiper-router实例详解
10-17
主要介绍了移动端滑动切换组件封装 vue-swiper-router实例详解,需要的朋友可以参考下
VUE点击swiper图片放大显示（演示web端）
weixin_43923958的博客
07-17 2386
实现效果：点击swiper图片放大显示 点击图片：（可以根据自己的需求，把单张图片改成swiper） 主要代码： <swiper ref="mySwiperHonor" class="swiper_honor" :options="swiperOptionHonor"> <swiper-slide class="swiper-slide" v-for="(item, index) of honorList" :key="index"> ...
vue项目之H5 app页面通过swiper实现中间变大，两边缩小的滑动轮播功能
yan263364的博客
08-14 5739
一、需求 微信H5，小程序，APP三端：手动滑动实现中间放大，两边图片缩小的效果。 可视区可看到三张图，其中左右两边的仅出现一小部分。如图 二、实现 按照依赖包 npm install vue-awesome-swiper --save HTML: <swiper :options="swiperOption" ref="mySwiper" class="swiper"> <swiper-slide v-for="(item, index) in pictures"
vue+antdsign 使用vue-awesome-swiper的coverflow效果笔记
n_2021的博客
06-07 352
项目使用的vue-awesome-swiper版本为3.1.3，vue-awesome-swiper还需要搭配swiper使用，swiper的版本依据vue-awesome-swiper依赖中swiper.vue的注释来引入。，会导致接口已经返回图片信息，但是页面上没有渲染出图片的问题，所以标签添加。2）由于需调用后端接口返回数据，与swiper的渲染存在。，即标签中不可有scope；1）swiper的样式要设置为。，控制swiper渲染的时机。
VUE3调用swiper slide实现简单的轮播图
qingyu3044的博客
04-12 446
loop autoplay两个属性的使用和之前版本不同。这里使用8.1.6版本。
antd 类组件swiper中的指示器和ref
weixin_46451295的博客
01-16 920
无
react中各类轮播swiper、走马灯Carousel使用（ant.design、antd-mobile、swiper整合文档）
刻痕
01-10 7636
react的 轮播图（要么叫做：走马灯）方案：要么引用ui框架，要么引用插件，要么自己手写（不建议，要处理兼容，有坑）。 **本文目录：** **一：antd-mobile（V2）使用Carousel走马灯** **二：antd-mobile（V5）使用Swiper轮播** **三：ant design 使用Swiper轮播** **四：引用swiper插件** ## 一：antd-mobile（V2） 走马灯Carousel [点击查看官方案例](https://antd-mobile-v2.surg
Ant Design Vue多张图为一组轮播展示
yangwq的博客
11-13 6152
目的 实现多张图为一组轮播展示效果 实现方案 H5的全局属性contenteditable属性 : 带有contenteditable属性的div作为输入框（div可以根据内容自动调整高度） H5代码块 <div class="rightDisplay"> <a-carousel arrows autoplay> <div slot="prevArro...
react轮播图swiper.js和antd走马灯的使用
qq_45149366的博客
10-12 2703
react轮播图swiper.js和antd走马灯的使用
antd 轮播图样式_基于swiper轮播图（带背景、和视觉差）
weixin_33716616的博客
01-03 742
当下前端开发中在轮播图这块，除了，各大ui框架的轮播组件外，用的最多的就swiper了吧！毕竟ui框架中，轮播组件的定制化功能还是比较欠缺的，毕竟不是专业做轮播的。今天记录的是基于swiper 的一款轮播图，他是包含背景，，并且每一个轮播的图片在动的时候，与背景之间还存在一定的视觉差，这样使轮播图看起来更有层次感和流动感。代码如下：<!DOCTYPE html> <html la...
SpringBoot+AntDesignVue实现excel导入功能
07-20
SpringBoot+AntDesignVue实现excel导入功能
基于ant design vue 实现的一套后台管理框架.zip
05-16
基于ant design vue 实现的一套后台管理框架。主要使用vue3 + vuex + vue-router + ts 基于ant design vue 实现的一套后台管理框架。主要使用vue3 + vuex + vue-router + ts 基于...
vue+swiper实现侧滑菜单效果
08-28
主要为大家详细介绍了vue+swiper实现侧滑菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue3+Vite+TypeScript+Ant Design Vue+Pinia等主流技术的后台管理系统项目.zip
01-03
Vue3+Vite+TypeScript+Ant Design Vue+Pinia等主流技术的后台管理系统项目，支持keepalive和Vite自动生成路由
Vue3+Vite+Ant Design 后台管理系统模板.zip
07-06
Vue3+Vite+Ant Design 后台管理系统模板.zip
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 440
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1020
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 311
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
vue 实现级联选择器功能
清音的博客
04-22 541
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue3+ant design vue+typescript 点击文字出现弹窗
07-14
要在 Vue 3 中结合 Ant Design Vue 和 TypeScript 实现点击文字出现弹窗的功能，你可以按照以下步骤进行操作： 1. 确保你已经按照官方文档的指引正确安装和配置了 Vue 3、Ant Design Vue 和 TypeScript。 2. 创建...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值