<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,
}
}, 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, });
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(); // 下一张
}
}, },
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;
} .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;
} .swiper-slide img {
width: 80px;
height: 80px;
}
.swiper-slide-active img {
width: 110px;
height: 110px;
} </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. Java中List与数组互相转化

    问题的提出: 今天在完成一个小功能的时候,需要把存放在List中的数据转化成字符串数组.想当然地用了List的一个方法toArray(),它的返回值是Object[]类型,于是用强制类型转换.代码如下 ...

  2. java启动jar包中的指定类

    运行jar文件的方法是:java -jar xxx.jar 希望运行里面的具体某个类,这时可以通过:java -cp xxx.jar xxx.com.xxxx 其中-cp命令是将xxx.jar加入到c ...

  3. 第28章:MongoDB-索引--过期索引(TTL)

    ①过期索引(TTL) TTL索引是让文档的某个日期时间满足条件的时候自动删除文档,这是一种特殊的索引,这种索引不是为了提高查询速度的,TTL索引类似于缓存,缓存时间到了就过期了,就要被删除了 ②范例: ...

  4. Django继承AbstractUser新建User Model时出现fields.E304错误

    错误内容如下 ERRORS: audit.UserProfile.groups: (fields.E304) Reverse accessor for 'UserProfile.groups' cla ...

  5. js中如何将数据获得2位小数以及对数据进行千分位划分

    js中toFixed(n) 方法可把 数字四舍五入为指定小数位数n的数字,注意:这个方法只能对数据类型为Number的数据起作用,包括float,int等.例如:   123.12345.toFixe ...

  6. DC画线

    CClientDC hdc(this);//获取DC CPen pen(PS_SOLID,4,RGB(255,0,0));//创建一支红笔 CPen * pOldPen=hdc.SelectObjec ...

  7. Docker Compose部署lnmp

    参考:https://github.com/micooz/docker-lnmp 一.简介 使用Dcoekr镜像部署lnmp(Linux.Nginx.MySQL.PHP7). 1.1 结构 app └ ...

  8. POJ2289 Jamie's Contact Groups(二分图多重匹配)

    Jamie's Contact Groups Time Limit: 7000MS   Memory Limit: 65536K Total Submissions: 7721   Accepted: ...

  9. hive如何执行一条sql的例子

    SQL如何在Mapreduce执行 左边是数据表,右边是结果表,这条 SQL 语句对 age 分组求和,得到右边的结果表,到底一条简单的 SQL 在 MapReduce 是如何被计算, MapRedu ...

  10. Maven的插件管理

    <pluginManagement> 这个元素和<dependencyManagement>相类似,它是用来进行插件管理的. 在我们项目开发的过程中,也会频繁的引入插件,所以解 ...