HTML 下拉刷新&禁止微信下拉

   .gd{
       transition: all .5s;
       -moz-transition: all .5s;	/* Firefox 4 */
       -webkit-transition: all .5s;	/* Safari 和 Chrome */
       -o-transition: all .5s;	/* Opera */
   }
     <div id="top" class="gd" style="display: none;">

        <span class="loading"> 上拉加载</span>
        <div class="load gd"   style="display: none;" >
            <div style="display:flex;justify-content: center;align-items: center;height:0.8rem;">
                <img style="width:0.3rem;" src="/static/mobile/images/weibo/load.gif" alt=""> &nbsp;加载中
            </div>
        </div>
    </div>
       $(document).ready(function(){
        var is_tap = false;
        var top = 0;
        var end = 0;
        var h = 0;
        var is_shuaxin = false;
        var max_h =    window.screen.height*0.1
        var touchstartY;
        $("#data").on('touchmove', function(e) {
            if($(document).scrollTop() == 0 && is_tap == true && data.page == 1){
                end = e.changedTouches[0].clientY;
                h = (end-top)/2;
                if( h > max_h){
                    h = max_h;
                    is_shuaxin = true;
                }
                $('#top').removeClass('gd');
                $('#top').attr('style','display: flex;align-items: center;align-items: center; justify-content: center; color:#999;');
                $('.loading').show();
                $('.load').hide();
                $('#top').css('height',h+"px");

            }else{
                is_tap = false;
                $('#top').hide();

            }


            var events = e.touches[0] || e;
            //注意app.scrollTop始终为0
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; //获取滚动部分的高度
            var clientHeight = document.documentElement.clientHeight; //获取手机屏幕高度(可视部分高度)
            var scrollHeight = document.scrollHeight; //所有内容的高度
            if (
                events.clientY > touchstartY &&
                scrollTop === 0 &&
                e.cancelable
            ) {

                e.preventDefault(); //禁止到顶下拉
            } else if (
                scrollTop + clientHeight > scrollHeight &&
                e.cancelable
            ) {
                // event.preventDefault(); //禁止到底上拉
            }
        });
        $("#data").on('touchstart', function(e) {
            if($(document).scrollTop() == 0 && data.page == 1 ){
                is_tap = true;
                top = e.changedTouches[0].clientY;

            }

            var events = e.touches[0] || e;
            touchstartY = events.clientY; //获取触摸目标在视口中的y坐标

        });
        $("#data").on('touchend', function(e) {
            if($(document).scrollTop() == 0 && data.page == 1 ){
                is_tap = false;
                $("#top").attr('class','gd');

                if(is_shuaxin == true && data.page == 1){
                    $('#top').css('height',"0.8rem");

                }else{

                    $('#top').css('height',"0px");
                }


            }

        });
        $('#top').on('webkitTransitionEnd', function(e) {
            $(".loading").hide();
            $('.load').show();
            if(is_shuaxin == true){

              //加载逻辑
            }

            }else{
                $('#top').hide();
            }
        });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值