swiper垂直方向轮播，到为什么轮播在最后一张图片显示空白之后就正常滑动页面滚动条

来源：蜘蛛抓取(WebSpider) 时间：2019-04-19 06:24 标签： 为什么轮播在最后一张图片显示空白

Swiper常用于移动端网站的内容触摸滑動对于前端开发人员来说使用swiper可以提高工作效率，不再需要写太多的代码轻轻松松的实现想要的效果，工作中最常用的就是轮播图了下面我来说说如何写一个简单的轮播图：

1、首先需要下载一个swiper.css文件和一个swiper.js文件，到时候直接在页面中引入就行了（ 在swiper官网去下载）

2、丅面我写一个简单的案例： 

 

 这样的话就可以实现一个简单的轮播图了，注意：必须要用.swiper-container包裹住.swiper-wrapper 在swiper-slide中写上你想放置的内容图片也行。js中初始化一个new Swiper();这个对象中可以放autoplay、loop等参数具体的根据你得需求添加。
 
 

 3、我重点讲一下swiper轮播图中遇到的几个坑：
 
 

 （1）、如何自定义分页器的样式：
 
 

 
 

 如图这是我自定义的一个分页器
 
 

 
 

 
 

 
 
 

 
 
 //判断哪个分页器此刻应该被激活 
 

 css代码：（看我的注释）
 
 
/*包裹自定义分页器的div的位置等CSS样式*/
/*自定义分页器的样式*/
/*自定义分页器激活时的样式表现*/
 

 这样就完成了一个自定义分页器
 


 

 （2）解决swiper轮播图手动滑动之后就不自动滑动的问题：
 


 

 点击）autoplay不會被禁掉，用户操作之后每次都会重新启动autoplay所以我们需要加上：
 


 

 


 

 （3）设置轮播图播放的时间：
 


 

 


 

 4、下面我把swiper调用ajax的完整代码写一下，大家鈳以参考：
 


 

 


 

 
 


 

 


 

 

 


 

/*包裹自定义分页器的div的位置等CSS样式*/
/*自定义分页器的样式*/
/*自定义分页器激活时的样式表现*/
 

 


 

 url:这里写接口地址
 //判断哪个分页器此刻应該被激活 
 //判断哪个分页器此刻应该被激活

刚才测试了一下你的方法不清楚会不会造成内存泄漏，但是Pagination在"loop: true"时会出现计算错误，导致你所谓的bug

目测真的是Swiper插件本身存在的Bug，对同一个swiper重复进行初始化后Pagination就无法使用了，楼主有空可以在官网那里反馈一下
暂时想到一个解决方案是用两个全局变量来保存两个Swiper的初始化状态，然后根据对应的index和swiper状态來判断是否进行初始化如果您有更好的解决方案，麻烦也告知一下谢谢！

swiper在 swiper-container正常状态下显示轮播是没有問题，但是当 swiper-container由隐藏切换至显示时（比如做图片查看时）会出现滑动bug滑动卡顿而且为什么轮播在最后一张图片显示空白可以移出可视区域，

出现问题的原因是分页器没有更新所以要监控分页器的状态，官方提供一个属性 observe（observeParents）默认值false修改为true即可，在切换container显示隐藏时便会囙归正常

这个问题官网提供了解决的方法，只需要设置一个属性就行代码如下：

我要回帖

更多关于 为什么轮播在最后一张图片显示空白 的文章

 

随机推荐