首页 开发指南

我们在使用swiper开发的时候,有时候会碰到这样一种情形:有一屏的高度超过了可视区域的高度,在这种情况下我们就要为这一屏添加滚动条,很多人都会想到iscroll插件,这两个插件相结合,思路是对得,但是当两个插件同时支持鼠标滑动操作的时候就会出现冒泡事件,有些人直接修改了源文件,我这里是不推荐的,其实,仔细查阅官方的帮助文件,我这里分享以下解决方案。

Swiper里面有一个参数:onTransitionStart:function(swiper){ },在这里面是支持回调函数的,我们只要把ISCROLL的赋值声明通过这个回调函数传递过来就可以了。

如下:

var mySwiper = new Swiper (‘.swiper-container’, {
direction: ‘vertical’,
loop:false,
paginationClickable: true,
mousewheelControl : true,
autoplayDisableOnInteraction : false,
// 如果需要分页器
pagination: ‘.swiper-pagination’,
onTransitionStart:function(swiper){
mycall();

}
})

函数mycall的定义如下:

function mycall(){
var myScroll;
myScroll = new IScroll(‘.three’, {
zoom: true,
scrollbars: false,
mouseWheel: true,
interactiveScrollbars: true,
shrinkScrollbars: ‘scale’,
fadeScrollbars: false
});
myScroll.on(‘scrollEnd’, function () {
if (this.y ==0) {
myScroll.destroy();
myScroll.refresh();
}

});

其中myScroll.destroy(),意思是销毁mysroll,当滚动条滚动到顶端的时候就销毁这个滚动效果,这样一来,鼠标的滑动事件就只剩下swiper了,而当swpier执行的时候会通过回调函数再次创建这个scroll,这样一来,问题基本解决了。

本案例只在PC端测试过,移动端未测试。如有好的文字,欢迎分享!

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

会员评论:(0)

声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!
©www.sbmzenith.com 2013-2022 All Rights Reserved.
豫ICP备15009393号