1. <template>
    <div class="swiper-box">
    <div class="swiper-container">
    <div class="swiper-wrapper">
    <div class="swiper-slide" v-for="(item, index) in slides" :key="index">
    <img :src="item" :data-index="index">
    </div>
    </div>
    </div>
    <div class="swiper-add" id="add" @click="clickAdd">
    <img src="../../assets/left/add.png">
    </div>
    <div class="swiper-text" >
    <div>- 123 -</div>
    <div>name<span></span><span>5星</span></div>
    </div>
    </div>
    </template>
    <script>
    import Swiper from '../../../static/swiper.min.js';
    import '../../../static/swiper.min.css';
    export default {
    props: {
    slides: {
    type: Array,
    }
    },
    data() {
    return {
    mySwiper: {},
    status: 1,
    }
    },
  2.  
  3. methods:{
    initSwiper(){
    this.mySwiper = new Swiper('.swiper-container', {
    // loop: true,
    // loopFillGroupWithBlank: true,
    // grabCursor: true,
    queueEndCallbacks: true,
    centeredSlides: true,//
    allowTouchMove: false, //不允许触摸滑动
    slidesPerView: 3,//设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字(可为小数,小数不可loop),或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
    slidesPerGroup: 1,
    // watchSlidesProgress : true,
    // watchSlidesVisibility : true,
    spaceBetween: 20,
    // slidesOffsetBefore: 100,
    // slidesOffsetAfter : 300,
    initialSlide: 0,
    observer:true,
    observerParents:true,
  4.  
  5. });
    this.$store.dispatch('getSwiperValue', this.mySwiper);
    var self = this;
    this.mySwiper.on('slideChangeTransitionEnd', function (swiper) { // 滑动之后执行
    var $img = document.querySelector('.swiper-slide-active > img');
    self.$store.dispatch('getSwiperIndex', $img.getAttribute('data-index')); // 得到第几张图片
    console.log($img.getAttribute('data-index'), this.slides.length - 1);
    if(this.isEnd) { //最后一个
    self.status = 2 // 修改状态
    }
    });
    },
    //点击下一张
    clickAdd(){
    if(this.status === 2){
    this.mySwiper.slideTo(0, 1000, false); // 回跳到第一个
    this.status = 1;
    this.$store.dispatch('getSwiperIndex', 0); // 修改值,第一张图片
    } else {
    this.mySwiper.slideNext(); // 下一张
    }
    },
  6.  
  7. },
    mounted() {
    this.initSwiper();
    }
    }
    </script>
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style lang="less">
    .swiper-box {
    position: relative;
    width: 408px;
    height: 248px;
    background: url('../../assets/left/bg.png') no-repeat;
    background-size: 100% auto;
    }
    .swiper-container {
    width: 300px;
    margin-left: 50px;
    }
    .swiper-slide {
    text-align: center;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    }
    .swiper-add {
    position: absolute;
    right: 12px;
    top: 82px;
    }
    .swiper-add img {
    width: 40px;
    height: 42px;
    }
  8.  
  9. .swiper-text {
    color: #ffffff;
    text-align: center;
    line-height:32px;
    position: absolute;
    left: 50%;
    top: 78%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    }
    .swiper-text div:last-child {
    color: #43FFD2;
    font-size: 18px;
    vertical-align: middle;
    }
    .swiper-text span:first-child {
    display: inline-block;
    width: 23px;
    height: 26px;
    margin: 0 4px 0 12px;
    vertical-align: middle;
    background: url('../../assets/left/level.png') no-repeat;
    background-size: 100% auto;
    }
    .swiper-text span:last-child {
    font-size: 12px;
    vertical-align: middle;
    }
    .swiper-wrapper {
    padding-top: 44px;
    height: 110px;
    }
  10.  
  11. .swiper-slide img {
    width: 80px;
    height: 80px;
    }
    .swiper-slide-active img {
    width: 110px;
    height: 110px;
    }
  12.  
  13. </style>

swiper4-vue 不使用loop,由最后一张跳到第一张的更多相关文章

  1. vue使用vue-router beforEach实现判断用户登录跳转路由筛选

    vue使用vue-router beforEach实现判断用户登录跳转路由筛选 :https://www.colabug.com/3306814.html 在开发webApp的时候,考虑到用户体验,经 ...

  2. vue常用操作及学习笔记(路由跳转及路由传参篇)

    路由跳转 - 超链接方式跳转 html: <div id="app"> <h1>Hello App!</h1> <p> <!- ...

  3. Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案

    Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案   by:授客 QQ:1033553122   开发环境   Win 10   Vue 2.9.6   node-v ...

  4. Vue router拦截 如果用户并未登录直接跳转到登录界面(最简单的cookie演示)

    router.beforeEach(function(to,from,next){ console.log('路由拦截') console.log(to.name) console.log(from. ...

  5. Vue.js中,如何自己维护路由跳转记录?

    在Vue的项目中,如果我们想要做返回.回退操作时,一般会调用router.go(n)这个api,但是实际操作中,使用这个api有风险,就是会让用户跳出当前应用,因为它记录的是浏览器的访问记录,而不是你 ...

  6. vue多个路由复用同一个组件的跳转问题(this.router.push)

    因为router-view传参问题无法解决,比较麻烦. 所以我采取的是@click+this.router.push来跳转 但是现在的问题是跳转后,url改变了,但是页面的数据没有重新渲染,要刷新才可 ...

  7. 小白学习vue第五天(理解使用组件开发,组件第一弹)

    组件怎么从创建到使用? 第一步创建组件构造器对象 感觉个人理解就是创建一个模板,和创建MongoDB数据模板相似 const cpnC = Vue.extend({ template: ` <d ...

  8. vue多个数据不一样的表格导出到同一张excel里面

    刚来公司第二天, 甩了个需求, 把两个不同表格的数据 导出到同一个excel中 ........额,好吧 你要说,两个表格数据差不多, 直接合并数据导出就行: async function getDa ...

  9. vue 自动识别PC、移动端,并跳转到对应页面

    app.vuehead中添加 <!--自动识别PC.移动--> <script src="static/js/uaredirect.js" type=" ...

随机推荐

  1. 关于拼接SQL语句sqlMap的使用方法

    1.为什么使用? 主要还是为了代码中获取到值,然后带入SQL语句中拼接查询 2.怎么使用? 1)bean继承了BaseEntity类,该类中有 /** * 自定义SQL(SQL标识,SQL内容) */ ...

  2. mount 移动硬盘出现的各种小问题

    1.fdisk -l 查看硬盘是否存在 2.新建要挂载硬盘的文件夹 mkdir  /disk   (如果想要挂载到已存在的目录就不要新建了) 3.挂载硬盘:mount /dev/sdc /disk 4 ...

  3. java Concurrent包学习笔记(六):Exchanger

    一.概述 Exchanger 是一个用于线程间协作的工具类,Exchanger用于进行线程间的数据交换,它提供一个同步点,在这个同步点,两个线程可以交换彼此的数据.这两个线程通过exchange 方法 ...

  4. IntelliJ IDEA 2017版 编译器使用学习笔记(九)(图文详尽版);IDE使用的有趣的插件;IDE代码统计器;Mybatis插件

    一.代码统计器,按照名字搜索即可,在file===setting------plugin 使用右键项目:点击自动统计 二.json转实体类 三.自动找寻bug插件 四.Remind me工具 五.检测 ...

  5. 词袋模型(BOW, bag of words)

    词集模型:单词构成的集合,每个单词只出现一次. 词袋模型:把每一个单词都进行统计,同时计算每个单词出现的次数. 在train_x中,总共有6篇文档,每一行代表一个样本即一篇文档.我们的目标是将trai ...

  6. 延时、输入输出接口P0~P3

    1.寄存器 为了知道延时程序是如何工作的,我们必需首先了解延时程序中出现的一些符号,就从R1开始,R1被称之为工作寄存器.什么是工作寄存器呢?让我们从现实生活中来找找答案.如果出一道数学题:123+5 ...

  7. Java相关工具下载、配置环境变量

    相关工具下载 JDK:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html Eclip ...

  8. Java读取修改Properties文件

    properties文件是我们经常需要操作一种文件,它使用一种键值对的形式来保存属性集. 无论在学习上还是工作上经常需要读取,修改,删除properties文件里面的属性. 本文通过操作一个prope ...

  9. Spring @Autowired注解用在集合上面,可以保持接口的所有实现类

    CourseService课程接口有2个子类,HistroyCourseServiceImpl和MathsCourseServiceImpl public interface CourseServic ...

  10. csdn 不登录浏览全文 chrome 浏览器

    1将此文章存到书签栏. 2 右键点击保存到书签栏的这个书签,然后点击修改. 3 名称改为:CSDN查看全文,网址改为: javascript:$("#article_content" ...