swiper使用技巧(一)

2022-07-13 17:30:58 浏览数 (2)

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响应式地调整了数量之后的结果。

代码语言:javascript复制
gridSwiper.update();
let $gridSwiperCheck = this.$('.swiper-container-horizontal .home-todo-check');
if (gridSwiper.isBeginning === gridSwiper.isEnd) {
   $gridSwiperCheck.hide();
} else {
   $gridSwiperCheck.show();
}

0 人点赞