javascript - js下拉刷新问题-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - js下拉刷新问题

ringa_lee 2017-04-10 16:55:46

[JavaScript讨论组]

569

页面本来是很简单(大部分东西写死,有几个商品是请求拿的),不过后来有一个滑动下拉(并不需要上拉,上拉自己实现也简单)刷新的需求,搞了一天,用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();
           }
        }
    });

求大神指教哈

ringa_lee

全部回复(1)

天蓬老师2017-04-10 16:57:46 1楼

上拉事件用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) {
                
            }

        });

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>