页面本来是很简单(大部分东西写死,有几个商品是请求拿的),不过后来有一个滑动下拉(并不需要上拉,上拉自己实现也简单)刷新的需求,搞了一天,用iscroll5破坏了我的结构不说,滑动也卡.用swiper在顶部下拉是没问题,可是swiper必须要有swiper-slide,我的页面不是纯粹的列表数据,感觉这种结构又不适合.可以有什么办法屏蔽swiper的上拉事件吗?
贴上我的代码
mySwiper = new Swiper('#swiper-container',{
direction : 'vertical',
slidesPerView:'auto',
freeMode : true,
freeModeMomentum : true,
onTouchEnd: function(swiper){
if (swiper.translate > 50) {
// Hold Swiper in required position
mySwiper.setWrapperTranslate(0,50,0)
//Dissalow futher interactions
mySwiper.params.onlyExternal=true
//Show loader
$('.preloader').addClass('visible');
//Load slides
initRequest();
}
}
});
求大神指教哈
上拉事件用api提供的方法是不可以禁止的,但是可以根据api提供的方法判断出合适的时机进行一些操作,
这里给一个swiper下拉刷新的例子,仅供参考
var Myswiper =new Swiper('.swiper-container', {
scrollbar: '.swiper-scrollbar',
wrapperClass: 'swiper-wrapper',
direction: 'vertical',
speed:500,
freeModeMomentumRatio : 0.5,
freeModeMomentumBounceRatio:0.5,
iOSEdgeSwipeThreshold : 50,
slidesPerView: 'auto',
freeMode: true,
lazyLoading: true,
observer:true,
observeParents:true,
onReachBeginning: function (swiper) {
console.log('到了第一个slide');
},
onReachEnd: function (swiper) {
console.log('到了最后一个slide');
},onTouchEnd: function (swiper) {
//头部下拉刷新
var leng = swiper.translate;
console.log("trans end"+leng);
if(leng>=80){
//刷新页面
}else{
//do nothing
}
},onTouchMove:function(swiper){
var leng = swiper.translate;
if(!loading&&leng>=80) {
//提示可以松开刷新
}else if(!loading&&leng<80&&leng>0){
//提示继续下拉可以刷新
}
},onTransitionEnd: function(swiper) {
}
});