欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于vue-awesome-swiper使用遇到的一些问题和心得(手动设置宽、手机翻转问题、回调函数、滑动)

程序员文章站 2024-02-16 13:00:04
...

1.首先项目用到的"vue-awesome-swiper": "^3.1.3" ,对应官网的swiper 3.0 地址 点击打开链接

2.基本配置就无需多言了,大家可以参考github上的示例 vue-awesome-swiper git地址

3.遇到的第一个问题是UI设计中需要做如下图的样式:

关于vue-awesome-swiper使用遇到的一些问题和心得(手动设置宽、手机翻转问题、回调函数、滑动)

因为 右侧需要一部分露出来,而插件是根据屏幕的宽自动给轮播列表项生成的宽,所以宽设置的话也会被行内样式覆盖,这时候需要一个属性 slidesPerView: 'auto' 这时候我们就可以自己设置宽啦。

4.第二个问题是手机翻转 引起 图片轮播出现空白。

这时候需要添加两个属性

 observer:true,//修改swiper自己或子元素时,自动初始化swiper  
 observeParents:true,//修改swiper的父元素时,自动初始化swiper 

然后需要监听手机翻转事件来重置轮播的数据,来触发这两个属性,从而达到初始化swiper 的效果

var evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(evt, function() {
   self.newsSlideDatas = []; //数据清空
   self.getNewsSlide();  //重新获取数据
}, false);

5.鼠标滑动轮播之后,自动轮播停止了,添加以下属性可重新触发自动轮播

autoplay: {
     delay: 2500,
      disableOnInteraction: false

}

6.关于vue-awesome-swiper插件的一些API的使用方法,具体可以参考 swiper4.0的使用规则,其他版本的直接用的话不会生效。