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


Posted in Javascript onOctober 16, 2020

本文实例为大家分享了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="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="img.url" alt="" />
       </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 = 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;
  }
 }
};
</script>
 
<style lang="scss">
.timeline {
 display: block;
 margin: 10px 20px 5px;
}
#star-pic-vue .el-dialog__wrapper {
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 overflow: auto;
 margin: 0;
 background: #171717;
}
#star-pic-vue {
 width: 100%;
 height: auto;
 display: flex;
 flex-wrap: wrap;
 justify-content: stretch;
 padding: 3px 13px;
 img {
  width: 82px;
  height: 80px;
  margin: 4px 0px 0px;
  padding-right: 2px;
 }
 .dialog {
  img {
   width: 100%;
   height: 100%;
   margin: 0;
  }
 }
 .el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  height: 100%;
  width: 100%;
 }
 .el-dialog__header {
  display: none;
 }
 .el-dialog__body {
  padding: 0 !important;
  margin: 0 !important;
  height: 460px;
  background: #171717;
 }
 .el-carousel {
  height: 100%;
 }
 .el-carousel__container {
  height: 410px;
 }
 .el-carousel__indicators--outside {
  margin-top: 20px;
 }
}
</style>

效果

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

$refs定位不到的主要原因是因为v-if、v-for、v-show这些语句如果依赖父组件传来的参数的话,该该参数是在mounted()阶段子还没获取得到~~~~!!!!

如果想要真正地在DOM加载完成后拿到数据,就需要调用VUE的全局api : this.$nextTick(() => {})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
禁止刷新,回退的JS
Nov 25 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
package.json文件配置详解
Jun 15 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
vue.js购物车添加商品组件的方法
Sep 17 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 #Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 #Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 #Javascript
JS实现简易图片自动轮播
Oct 16 #Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 #Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 #jQuery
JS绘图Flot应用图形绘制异常解决方案
Oct 16 #Javascript
You might like
第二节--PHP5 的对象模型
2006/11/16 PHP
php笔记之常用文件操作
2010/10/12 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
JavaScript 学习笔记(十五)
2010/01/28 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
JS重要知识点小结
2011/11/06 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
JS实现的数组全排列输出算法
2015/03/19 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
python实现实时视频流播放代码实例
2020/01/11 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
校园新闻广播稿
2014/01/10 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
《花木兰》教学反思
2014/04/09 职场文书
上海世博会口号
2014/06/19 职场文书
美术专业自荐信
2014/07/07 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server