SWIPER
swiper设置loop后无法正常使用
期望效果： 实现正常的无限循环
问题描述：swiper的loop设置无效 衍生=> 给父级添加v-if解决 衍生=> 因为默认数据时空数组，所以在动态渲染数据后不能改变swiper，导致swiper不能动 衍生=> 给默认数组添加假数据不让为空数组即可解决 衍生=> 导致动态渲染数据后，有一个数据是默认数据。
症结所在： swiper的loop和图片懒加载不能同时存在。因为loop的机制是前后复制一个对象用来实现滑动时无缝循环的效果，所以如果我们应用了懒加载会出现：第一，我们会遇到有空白数据存在，触摸即好的情况；第二： 滑动时有默认图出现，不是理论上图片资源都已加载完毕的情况。
解决方法： vue循环的dom首尾不使用懒加载或其他有影响的图片功能，中部dom可以添加。
代码展示：
``
<div class="swiper-container" id="swiper_banner" style="margin-top: 0rem;">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in data.banner" :key="index">
<a href="javascript:void(0)">
<!-- 这里之所以这样是因为懒加载无法和swiper的loop同时共存。首尾不能有懒加载 -->
<img
v-if="index !== 0 && index !== data.banner.length - 1"
src="~_img/loadImg/bannerLoading.png"
v-real-img="common.getRightImg(item.thumb)"
/>
<img
v-else
:src="common.getRightImg(item.thumb)"
/>
</a>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
``
在vue循环的dom上bind的点击事件点击不对应
期望效果： 点击swiper时执行预设函数，并跳转到相应的外链
问题描述：点击vue循环的dom，有的点击无效果。
症结所在： 在vue循环的dom上bind的点击事件并不会复制到loop的dom上，所以我们需要使用swiper自带的点击回调。在使用点击回调时，我们也会遇到无法正确获取点击态下标的问题。归根结底，都是loop的原因。具体的我上面也解释了，直接贴代码。
代码展示：
// 初始化swiper
private swiperInit() {
const _this = this;
this.swiper = new Swiper('#swiper_banner', {
loop: true,
autoplay: true,
initialSlide: 0,
preventClicksPropagation : false, // 阻止触摸时冒泡点击
observer: true, // 修改swiper自己或子元素时，自动初始化swiper
observeParents: true, // 修改swiper的父元素时，自动初始化swiper
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable: true
},
on:{
click(){
// 解决代码
let index = _this.swiper.clickedIndex - _this.swiper.activeIndex + _this.swiper.realIndex === _this.data.banner.length ? 0 : _this.swiper.clickedIndex - _this.swiper.activeIndex + _this.swiper.realIndex;
// 我得到的index就是点击的item在实际数组中的下标index
let data = _this.data.banner[index]
Vue.prototype.totalClick(data.id,data.link)
},
},
});
}
本地vue请求网络接口某些接口Network Error
期望效果： 正常请求获得数据
问题描述：大部分接口正常请求，只有某些接口报错。
症结所在： 开启了广告拦截插件，如ABP或者UO，具体原因有待剖析
代码展示： 无
