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 相关文章推荐
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
Jquery AJAX 框架的使用方法
Nov 03 Javascript
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
AngularJS的ng-click传参的方法
Jun 19 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
php中文字母数字验证码实现代码
2008/04/25 PHP
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
javascript中的new使用
2010/03/20 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
python中adb有什么功能
2020/06/07 Python
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
北京SQL新华信咨询
2016/09/30 面试题
举例说明类变量和实例变量的区别
2016/06/30 面试题
Java面试笔试题大全
2016/11/23 面试题
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
迟到检讨书400字
2014/01/13 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
2016春节家属慰问信
2015/03/25 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
趣味运动会加油词
2015/07/18 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
海弦WR-800F
2022/04/05 无线电