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的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
js实现图片无缝滚动
Dec 23 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 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实现根据词频生成tag云的方法
2015/04/17 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
教育课题研究自我鉴定范文
2013/12/28 职场文书
儿子婚宴答谢词
2014/01/09 职场文书
分家协议书
2014/04/21 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
教师节随笔
2015/08/15 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
Nginx的gzip相关介绍
2022/05/11 Servers