到处都是坑,坑,坑
1、之前的写法是在data中配置swiperOption属性;
出现的问题是,当图片“滑动起来后”有的图片点击事件并不生效;
后来一查才知道,当loop为true时,会自动补充虚拟的DOM;在该DOM上Vue中的事件无法触发!
2、模仿下面的网址,改造原来的轮播图时出现的问题,点击当前图片的时index值没有对应上,因为我的页面是想点击图片然后跳到对应的url,结果没想到出现“页面丢失”(data-index和dataset那几行代码没看懂,当时没有写)
3、模仿下面的网址添上data-index和dataset搞定!!!
留有的疑问:(希望看到的大佬能解释一下)
1)这两个'this'没反应过来,只知道一个调用vue中的变量,一个是调用swiper的的变量。
2)当拖动图片时,底下的文字会抖动,一直也没能成功解决,但是放在生产环境却又不抖动。
补充:
当 welfareNoticeLists的长度为1时需要单独处理样式:
感谢大神的链接:https://blog.csdn.net/Mrswater/article/details/91450892
<template>
<div class="vueSwiper">
<div class="welfareNoticeLists" v-if="welfareNoticeLists.length>0">
<div class="vueSwiperContainer" style="" id="swiper1" >
<template>
<swiper :options="swiperOption" ref="mySwiper" >
<template v-if="this.welfareNoticeLists.length === 1">
<!-- 需要单独设置样式 -->
<swiper-slide class="swiper-slide" v-for="(item, index) in welfareNoticeLists" :key="index"
// 核心代码!!!!
:data-index='index'>
<div class="slide-item" style="width:80%;margin-left:10%">
<img src="./img/01.png" alt="" style="opacity:1;width:100%;height:100%;" >
<p class="slide-item-title">{{item.title}}</p>
<p class="slide-item-time">{{item.created}}</p>
</div>
</swiper-slide>
<!-- 注意复制swiper-slide会报错;重复的index -->
<!-- <swiper-slide class="swiper-slide" v-for="(item, index) in welfareNoticeLists" :key="index" :data-index='index'>
<div class="slide-item" style="width:80%;margin-left:10%">
<img src="./img/01.png" alt="" style="opacity:1;width:100%;height:100%;" >
<p class="slide-item-title">{{item.title}}</p>
<p class="slide-item-time">{{item.created}}</p>
</div>
</swiper-slide> -->
</template>
<template v-if="this.welfareNoticeLists.length > 1">
<swiper-slide class="swiper-slide" v-for="(item, index) in welfareNoticeLists" :key="index" :data-index='index'>
<div class="slide-item">
<img src="./img/01.png" alt="" style="opacity:1 ">
<p class="slide-item-title">{{item.title}}</p>
<p class="slide-item-time">{{item.created}}</p>
</div>
</swiper-slide>
</template>
</swiper>
</template>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'vueSwiper',
data () {
return {
welfareNoticeLists: [
{title: '行到水穷处', created: '2019-11-01'},
{title: '坐看云起时', created: '2019-11-01'}
],
// swiperOption: {
// loop: true,
// direction: 'horizontal',
// spaceBetween: 20, // slide间隙
// centeredSlides: true,
// watchSlidesProgress: true,
// loopAdditionalSlides: 2,
// lazyLoadingOnTransitionStart: true, // 过渡开始就加载
// roundLengths: true, // 宽度取整
// slidesPerView: 1.3// 页面分组显示
// }
}
},
computed: {
swiper () {
return this.$refs.mywiper.swiper
},
swiperOption () {
let _this = this
let option = {
loop: true,
direction: 'horizontal',
spaceBetween: 20, // slide间隙
centeredSlides: true,
watchSlidesProgress: true,
loopAdditionalSlides: 2,
lazyLoadingOnTransitionStart: true, // 过渡开始就加载
roundLengths: true, // 宽度取整
slidesPerView: 1.3, // 页面分组显示
on: {
click: function (e) {
// 核心代码!!!
let index = this.clickedSlide.dataset.index
console.log('index:::', index)
// window.location.href = _this.welfareNoticeLists[index].url
}
},
preventLinkPropagation: false
}
if (this.welfareNoticeLists.length < 2) {
option.slidesPerView = 1
option.slidesPerGroup = 1
}
if (this.welfareNoticeLists.length < 3) {
option.autoplay = false
}
return option
}
},
methods: {
}
}
</script>
<style lang="less" scoped>
.vueSwiper {
.welfareNoticeLists {
width:100%;
height:300px;
border: 1px solid red;
box-sizing: border-box;
.vueSwiperContainer {
// background: yellowgreen;
}
img {
width:100%;
height:100%;
}
}
}
</style>
<style lang="less">
.swiper-container-android .swiper-slide {
// border:1px solid red;
border-radius: 20px !important;
img {
border-radius: 20px !important;
}
}
</style>