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 相关文章推荐
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
jQuery简单实现日历的方法
May 04 Javascript
Javascript实现Array和String互转换的方法
Dec 21 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
js数据类型检测总结
Aug 05 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
如何在vue中使用jointjs过程解析
May 29 Javascript
javascript实现扫雷简易版
Aug 18 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
PHP 批量删除数据的方法分析
2009/10/30 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
Python回调函数用法实例详解
2015/07/02 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
Python实现简单猜数字游戏
2021/02/03 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
高二政治教学反思
2014/02/01 职场文书
清扬洗发水广告词
2014/03/14 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
工作保证书怎么写
2015/02/28 职场文书
学校党员干部承诺书
2015/05/04 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
电工生产实习心得体会
2016/01/22 职场文书
导游词之日本富士山
2020/01/06 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers