Swiper是一个非常好用的轮播插件，满足各种各样的使用条件和环境，响应式，多列，多行，等等，但是，很多时候还是会有一些条件下Swiper提供的API并不能直接帮我们解决问题，但是都可以通过变通的方式处理。今天要分享的就是关于swiper的左右切换按钮，分页导航的显示或者隐藏的问题。
有些时候，我们的需求是这样的，1，当swiper没有多页的时候，左右按钮不出现，2，多于一页的时候，左右按钮出现，但是不能向前或者向后时，左右按钮会有不能点击的状态。
swiper在初始化的时候会为不能点击的左右按钮加上‘swiper-button-disabled’这个class，我们可以用css为这个class添加相应的样式，如果要隐藏，可以直接隐藏掉，但是这样做的话，当左右按钮只有一个是disabled状态时，就会出现一边有一边没有的情况。解决这个问题的方法是，我们在swiper初始化后获得swiper对象，然后获取swiper.isBeginning和swiper.isEnd属性，然后判断如果这两个属性同时为true那就表示，swiper在同一时间，既不能向前slide也不能向后slide了，那就说明没有超过一页，然后我们就可以执行我们想执行的逻辑了。
当然，如果你的swiper不是根据屏幕大小调整显示的数量的响应式的，那就不用这个麻烦，直接判断slide的个数就行了，
需要注意的是，这种方法判断时，一定要在浏览器窗口大小改变时，手动触发swiper的update事件，然后再获取isBeginning和isEnd属性，这样获取到的才会是swiper响应式地调整了数量之后的结果。
gridSwiper.update();
let $gridSwiperCheck = this.$('.swiper-container-horizontal .home-todo-check');
if (gridSwiper.isBeginning === gridSwiper.isEnd) {
$gridSwiperCheck.hide();
} else {
$gridSwiperCheck.show();
}
评论 (0)