swiper3.4.2做轮播200多张手机截屏的时候出了问题
vue2的项目，H5手机端页面。
压缩图片，做了<img v-if="(index + 5) >= curIndex && (index - 5) <= curIndex" src="item.src" />判断，只显示前后五张图片，在其他安卓手机上还过的去，但是在iPhone11， 12上面，滑动的时候，不灵敏还很卡，而且滑动到三四个slide的时候就会出现重新加载页面的情况。
原因是：slide太多了，即便后面的slide里面都空的，但是总共200多个slide依然会出现问题。
解决办法：第一次加载30个数据源，后面每滑动一次，就从数据源取一个数据，添加到循环的数组中去。
代码：
// SwiperPage.vue
<template>
<div class="h5list">
<div class="cult-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in h5listNew" :key="index">
<p :class="{ 'tweetss': tweets ? true : false }">{{ item.title }}</p>
<div :class="['img-box',(index <= (activeIndex + 5) && index >= (activeIndex - 5)) ? 'display-img' : '']" :style="{height: boxHeightPx}">
<img v-if="(index <= (activeIndex + 5) && index >= (activeIndex - 5))" :src="item.src" alt="" />
</div>
</div>
</div>
</div>
<!-- <div
class="swiper-pagination pageactive"
:class="{ 'tweets': tweets ? true : false }"
></div> -->
<div class="swiper-bottom">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in h5listNew" :key="index">
</div>
</div>
</div>
<img src="images/twesstbg.png" class="slidebg" alt="" />
</div>
</template>
<script>
export default {
name: "swiper-view",
props: {
h5list: {
type: Array,
default: () => {
return []
}
},
tweets: {
type: Boolean,
},
},
data: function () {
let remFontSize = document.documentElement.style.fontSize.replace('px', '') - 0
let h5ListWidth = remFontSize * 6.38
return {
activeIndex: 0,
h5ListWidth,
boxHeight: 340,
h5listNew: [],
swiper: null
};
},
computed: {
boxHeightPx() {
let imgSize = null
if (this.tweets) {
imgSize = {
w: 346, h: 703
}
} else {
imgSize = {
w: 358, h: 635
}
}
return (this.h5ListWidth * imgSize.h * 0.7 / imgSize.w).toFixed(2) + 'px'
}
},
mounted() {
this.$nextTick(() => {
this.initswiper();
})
},
methods: {
initswiper() {
this.swiper = new Swiper(".cult-container", {
// pagination: ".swiper-pagination",
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
observer: true,
observeParents: true,
// lazyLoading : true,
// lazyLoadingInPrevNext : true,
// lazyLoadingInPrevNextAmount : 2,
coverflow: {
rotate: 0, // 旋转的角度
stretch: 150, // 拉伸 图片间左右的间距和密集度
depth: 20, // 深度 切换图片间上下的间距和密集度
modifier: 1, // 修正值 该值越大前面的效果越明显
slideShadows: false, // 页面阴影效果
},
// onTouchStart: (swiper) => {
// console.log('onTouchStart', swiper.activeIndex)
// },
onTouchEnd: (swiper) => {
// console.log('onTouchEnd', swiper.activeIndex)
if (this.activeIndex != swiper.activeIndex) {
let newlen = this.h5listNew.length
let hlen = this.h5list.length
if (swiper.activeIndex > this.activeIndex && hlen !== newlen) {
if (hlen > newlen) {
this.h5listNew = this.h5listNew.concat(this.h5list.slice(newlen, newlen + 1))
}
}
this.activeIndex = swiper.activeIndex
}
},
// onSlideChangeStart: (swiper) => {
// console.log('onSlideChangeStart', swiper.activeIndex)
// },
// 不灵敏，有时候明明已经是下一页了，但是却没有触发这个函数
// onSlideChangeEnd: (swiper) => {
// // console.log('onSlideChangeEnd:', this.h5list[swiper.activeIndex].href)
// if (this.activeIndex != swiper.activeIndex) {
// this.activeIndex = swiper.activeIndex
// }
// },
});
},
},
watch: {
swiper: {
handler: function () {
let newArr = this.h5list;
if (newArr.length > 0) {
if (this.tweets && newArr[0].href != this.gotweets) {
this.gotweets = newArr[0].href
} else if (newArr[0].href != this.gopageH5) {
this.gopageH5 = newArr[0].href
}
this.$nextTick(() =>{
this.swiperBottom = new Swiper('.swiper-bottom', {
initialSlide : 0,
centeredSlides: true,
slidesPerView: 'auto',
// observer: true,
slideToClickedSlide: true
})
this.swiper.params.control = this.swiperBottom;//需要在swiperBottom初始化后，Swiper1控制swiperBottom
// this.swiperBottom.params.control = this.swiper;
})
}
},
immediate: true
},
h5list: {
handler: function() {
if (this.h5list.length >= 30) {
this.h5listNew = this.h5list.slice(0, 30)
} else {
this.h5listNew = this.h5list
}
},
immediate: true
}
}
};
</script>
<style lang="less" scoped>
.h5list {
width: 638px;
padding-bottom: 35px;
overflow: hidden;
margin: 3.1rem auto 0 auto;
position: relative;
padding-top: 0.15rem;
}
.cult-container {
width: 638px;
margin: 0 auto;
height: 100%;
.swiper-slide {
text-align: center;
border-radius: 50px;
height: 100%;
box-sizing: border-box;
opacity: 0.7;
p {
text-align: left;
width: 70%;
height: 40px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 40px;
opacity: 0;
color: #935658;
font-size: 28px;
position: relative;
top: -0.15rem;
&::before {
display: inline-block;
content: ".";
font-size: 30px;
vertical-align: top;
margin-right: 15px;
margin-left: 5px;
position: relative;
top: -8px;
}
}
p.tweetss{
color: #538d81;
}
.img-box {
width: 70%; position: relative;
margin: 0 auto;
border-radius: 50px; overflow: hidden;
}
img {
display: none; position: absolute; width: 100%; left: 0; top: 0;
}
.display-img {
& > img {
display: block;
}
}
}
.swiper-slide-active {
opacity: 1;
p {
display: inline-block;
opacity: 1;
}
.img-box {
box-shadow: 0px 5px 30px #cc9a8f;
}
}
.swiper-slide:nth-child(1), .swiper-slide:nth-child(2), .swiper-slide:nth-child(3) {
img {
display: block !important;
}
}
}
.checkh5 {
width: 465px;
text-align: center;
margin: 0.25rem auto 0 auto;
}
.slidebg {
width: 120px;
position: absolute;
bottom: 0;
right: 0;
}
.swiper-bottom {
width: 80%; margin: 0 auto; position: relative; overflow: hidden;
.swiper-slide {
margin: 0 6px;
width: 12px; overflow: hidden;
height: 12px; border-radius: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
.swiper-slide-active {
background: #538d81 !important;
}
.swiper-wrapper {
padding: 30px 0;
}
}
</style>
网友评论