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 相关文章推荐
摘自启点的main.js
Apr 20 Javascript
国外的为初学者写的JavaScript教程
Jun 09 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
JS中常用的正则表达式
Sep 29 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
细说Vue组件的服务器端渲染的过程
May 30 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程序总是提示验证码输入有误解决方案
2015/01/07 PHP
php上传文件常见问题总结
2015/02/03 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
用Python实现校园通知更新提醒功能
2019/11/23 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
团拜会策划方案
2014/06/07 职场文书
文明好少年事迹材料
2014/08/19 职场文书
十佳青年事迹材料
2014/08/21 职场文书
教师学期个人总结
2015/02/11 职场文书
员工手册编写范本
2015/05/14 职场文书
2015党建工作简报
2015/07/21 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL