vue使用swiper实现左右滑动切换图片

本文实例为大家分享了vue使用swiper实现左右滑动切换图片的具体代码,供大家参考,具体内容如下

使用npm 安装vue-awesome-swiper

npm install vue-awesome-swiper --save

在main.js中引用

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.user(VueAwesomeSwiper)
import 'swiper/dist/css/swiper.css'

在组件中使用

<template>
 <div>
  <label class="timeline">{{ time }}</label>
  <div id="star-pic-vue">
   <template v-if="data">
    <img
     e
     v-for="(item, index) in images"
     :src="http://www.cppcns.com/wangluo/javascript/item.url"
     :key="index"
     id="contract_url"
     @click="enlargePic(index)"
    />
    <template v-if="isDialogShow"> </template>
    <el-dialog
     :visible.sync="centerDialogVisible"
     width="100%"
     modal
     close-on-click-modal
     custom-class="dialog"
    >
     <swiper :options="swiperOption" ref="mySwiper" style="height: 100%;">
      <swiper-slide v-for="(img, index) in images" :key="index">
       <div class="swiper-zoom-container">
        <img :src="http://www.cppcns.com/wangluo/javascript/img.url" alt="vue使用swiper实现左右滑动切换图片" />
       </div>
      </swiper-slide>
     </swiper>
    </el-dialog>
   </template>
  </div>
 </div>
</template>
 
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
 name: "PictureComponent",
 props: ["data", "maxShow", "time"],
 data() {
  return {
   centerDialogVisible: false,
   showPic: "",
   isDialogShow: false,
   activeIndex: 1,
   startX: 0,
   swiperOption: {
    width: window.innerWidth,
    zoom: true,
    initialSlide: 0
   }
  };
 },
 computed: {
  images() {
   if (this.data instanceof Array && this.data.length > 2) {
    var value = http://www.cppcns.com/wangluo/javascript/this.data;
    return value.splice(0, this.maxShow);
   } else {
    return this.data;
   }
  }
 },
 components: {
  swiper,
  swiperSlide
 },
 methods: {
  // 放大图片
  enlargePic(i) {
   this.activeIndex = i;
   this.isDialogShow = true;
   // 使用$refs,如果ref是定位在有v-if、v-for、v-show中的DOM节点,
   // 返回来的只能是undefined,因为在mounted阶段他们根本不存在
   this.$nextTick(() => {
    var swiper = this.$refs.mySwiper.swiper;
    swiper.activeIndex = i;
   });
   this.centerDialogVisible = true;
  }
 }
};

 



Copyright 2019 我的607_my607_IT资讯idcvps云服务器互联网等分享和工具 All Rights Reserved 南京肥雀信息技术有限公司 版权所有. Copyright © 2019-2022 All rights reserved. ">苏ICP备16063723号-3