swiper4使用教程-填坑
本篇博客用于记录使用swiper插件中的一些关键点:
首先附上官网地址:https://www.swiper.com.cn/
4.0版本之后,如果需要在display:none中的容器内初始化swiper,可以配置观察属性:
observer:true,//修改swiper自己或子元素时,自动初始化swiper observeParents:true//修改swiper的父元素时,自动初始化swiper
ios中使用swiper的坑:
/*解决swiper中苹果点击变暗,在css中加入下面这段*/ * { outline: none; webkit-focus-ring-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-overflow-scrolling : touch; }
长屏滚动实现 填坑参考:
//这个swiper创建的是长屏滚动效果,重要的一点是,该对象的swiper-slide样式的height要设为auto! var swiperObj = new Swiper ('.swiper-container', { direction: 'vertical', slidesPerView: 'auto', freeMode: true, mousewheelControl: true, roundLengths : true, on:{ touchMove: function(event){ }, touchEnd: function(event){ }, touchStart:function(event){ //this代表当前,如果页面中有多个.swiper-container,则swiperObj为数组。 //swiperObj是个单独对象时,this可以换成该对象名字 //下面两行用来解决滑动过程中,点击可停止。 this.setTransition(0) this.setTranslate(this.getTranslate()); }, transitionEnd: function(){ //下面的判断通常用来监听页面箭头提示,滑到底部隐藏 if(this.isEnd){ $('.arrowImg').hide(); }else{ $('.arrowImg').show(); } }, } })
初始化swiper时:如果该页面是display等于none的状态,那么在该页面显示时可以调用 swiper.update()方法激活,页面宽高变化时,也可以调用update()来激活。
swiper做成长页面滑动时,swiper.setTranslate(0)可以回到顶部。
跳转到swiper中的某一屏:swiper.slideTo(index, speed, runCallbacks):
index | num | 必选 | 指定将要切换到的slide的索引 |
speed | num | 可选 | 切换速度(单位ms) |
runCallbacks | boolean | 可选 | 设置为false时不会触发transition回调函数 |
swiper滚动条的设置:
注意:如果swiper里面有输入框,弹起输出法又弹下后滚动条位置不归位,尝试把滚动条的那个dom元素放到swiper-container元素之外,并且更新滚动条对应样式。
<div class="swiper-scrollbar"></div>
.swiper-container-vertical>.swiper-scrollbar { position: absolute; right: 2%; top: 2%; z-index: 50; width: 2.8px; height: 100%; background-color: #616161; opacity: 0.7 !important; } .swiper-scrollbar-drag{ width: 100%; left: 0; background: rgba(255,255,255,0.6);
var swiperObj = new Swiper ('.swiperBox', { direction: 'vertical', scrollbar: { el: '.swiper-scrollbar', }, slidesPerView: 'auto', freeMode: true, mousewheelControl: true, roundLengths : true, on:{ touchMove: function(event){ }, touchEnd: function(event){ }, touchStart:function(event){ //this代表当前,如果页面中有多个.swiper-container,则swiperObj为数组。 //swiperObj是个单独对象时,this可以换成该对象名字 //下面两行用来解决滑动过程中,点击可停止。 this.setTransition(0) this.setTranslate(this.getTranslate()); } } })
最重要的是: 多查文档 https://www.swiper.com.cn/api/index.html
注意:loop设为true的情况,可能会出现swiper中一些事件失效问题,索引也可能被打乱,这个要慎用。
loop为true解决参考:
loop为true代表可循环滚动,这时候插件就会创建若干个slide块来补位让滑动衔接,通常slide的数量就增多了。
部分slide块中元素事件失效,也许是因为该块slide是swiper复制补位的,但并未把事件带过去,解决方法可以用标签绑定。
<div onclick='method()'></div>,事件写到标签上,swiper复制出来的slide也拥有该事件属性,slide中块的索引和属性,也可以写在标签上,data-index='1'。
this.activeIndex值出现变动,可以考虑用this.realIndex,结合实际的值去测试,也可以用数组索引去操作:
var slideArr = $('.swiper-slide');
slideArr[0].find('.obj').addClass('layer');