html5模拟Android下拉刷新

最新推荐文章于 2018-07-31 04:31:08 发布
最新推荐文章于 2018-07-31 04:31:08 发布
阅读量1k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zboracle/article/details/46913523
版权 
<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>税收快报</title>
    <!-- Bootstrap -->
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- 自定义的css样式-->
    <link href="../css/common-bs.css" rel="stylesheet">
    <link href="../css/self-setting.css" rel="stylesheet">
    <script src="../js/vendor/jquery-1.11.2.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body class="bs-body">
<div class="preloader"> Loading... </div>
<div class="container-fluid" >
    <div class="row-fluid swiper-wrapper" >
        <div class="span12" >
            <div class="bs-box" id="bs-box">
                <!-- 年度税收 -->
                <span class="bs-item-title">年度税收收入累计数（2015）</span>
                <div class="bs-box-list">
                    <!-- bs-box-odd 奇数行时加上该样式，偶数行不加-->
                    <span class="bs-box-span bs-box-odd bs-box-bg1">
                        <span class="bs-title">总税收</span>
                        <span class="bs-total-op">
                            <span class="percent">80%</span> <span class="percent-img"></span>
                        </span>
                        <span class="bs-total-num">￥1,200,89 <span class="bs-total-num-yuan">万元</span></span>
                        <span class="bs-total-op"><a href="about.html" class="bs-detail">详情</a> <a href="about.html">地州</a></span>
                    </span>

                    <span class="bs-box-span  bs-box-bg2">
                        <span class="bs-title">中央级</span>
                        <span class="bs-total-op">
                            <span class="percent">80%</span> <span class="percent-img"></span>
                        </span>
                        <span class="bs-total-num">￥5,345,89 <span class="bs-total-num-yuan">万元</span></span>
                        <span class="bs-total-op"><a href="about.html" class="bs-detail">详情</a> <a href="about.html">地州</a></span>
                    </span>

                    <span class="bs-box-span  bs-box-bg3">
                        <span class="bs-title">地方级</span>
                        <span class="bs-total-op">
                            <span class="percent">80%</span> <span class="percent-img"></span>
                        </span>
                        <span class="bs-total-num">￥6,345,89 <span class="bs-total-num-yuan">万元</span></span>
                        <span class="bs-total-op"><a href="about.html" class="bs-detail">详情</a> <a href="about.html">地州</a></span>
                    </span>
                </div>
                <!-- 月度税收 -->
                <span class="bs-item-title">月度税收收入累计数（7月）</span>
                <div class="bs-box-list">
                    <span class="bs-box-span bs-box-odd bs-box-bg0">
                        <span class="bs-title">总税收</span>
                        <span class="bs-total-op">
                            <span class="percent">80%</span> <span class="percent-img"></span>
                        </span>
                        <span class="bs-total-num">￥1,345,89 <span class="bs-total-num-yuan">万元</span></span>
                        <span class="bs-total-op"><a href="about.html" class="bs-detail">详情</a> <a href="about.html">地州</a></span>
                    </span>
                    <span class="bs-box-span  bs-box-bg0">
                        <span class="bs-title">中央级</span>
                        <span class="bs-total-op">
                            <span class="percent">80%</span> <span class="percent-img"></span>
                        </span>
                        <span class="bs-total-num">￥1,345,89 <span class="bs-total-num-yuan">万元</span></span>
                        <span class="bs-total-op"><a href="about.html" class="bs-detail">详情</a> <a href="about.html">地州</a></span>
                    </span>
                    <span class="bs-box-span bs-box-odd bs-box-bg0">
                        <span class="bs-title">地方级</span>
                        <span class="bs-total-op">
                            <span class="percent">80%</span> <span class="percent-img"></span>
                        </span>
                        <span class="bs-total-num">￥1,345,89 <span class="bs-total-num-yuan">万元</span></span>
                        <span class="bs-total-op"><a href="about.html" class="bs-detail">详情</a> <a href="about.html">地州</a></span>
                    </span>
                     <span class="bs-box-span  bs-box-bg0">
                        <span class="bs-title">中央级</span>
                         <span class="bs-total-op">
                            <span class="percent">80%</span> <span class="percent-img"></span>
                        </span>
                        <span class="bs-total-num">￥1,345,89 <span class="bs-total-num-yuan">万元</span></span>
                        <span class="bs-total-op"><a href="about.html" class="bs-detail">详情</a> <a href="about.html">地州</a></span>
                    </span>
                    <span class="bs-box-span bs-box-bg0">
                        <span class="bs-title">地方级</span>
                        <span class="bs-total-op">
                            <span class="percent">80%</span> <span class="percent-img"></span>
                        </span>
                        <span class="bs-total-num">￥1,345,89 <span class="bs-total-num-yuan">万元</span></span>
                        <span class="bs-total-op"><a href="about.html" class="bs-detail">详情</a> <a href="about.html">地州</a></span>
                    </span>
                </div>
                <span class="bs-refresh-date">数据截止日期:<span class="bs-refresh-time">2015-05-12 11:24:20</span></span>

                </div>
            </div><!-- span12 -->
        </div><!-- row-fluid -->
    </div><!-- container-fluid-->
    <!-- jquery 和 bootstrap 注：js请放到尾部-->
<script type="text/javascript">
    var startY,startX,tempY,timerId;
    var obj = document.getElementById('bs-box');
    obj.addEventListener("touchstart",function(event){
        //event.preventDefault();
        if (! event.touches.length) return;
        var touch = event.touches[0];
        startY = touch.pageY;
        startX = touch.pageX;

    });
    obj.addEventListener('touchmove', function(event) {
        // 如果这个元素的位置内只有一个手指的话
        if (event.targetTouches.length == 1) {
            //event.preventDefault();// 阻止浏览器默认事件，重要
            var touch = event.touches[0];
            tempY = touch.pageY;
            if(tempY > startY && $(window).scrollTop() <= 0){
                $(".preloader").show();
                window.clearInterval(timerId);
                timerId = window.setTimeout(myTouchEnd, 100);
            }
        }
    }, false);

    function myTouchEnd(){
        if(tempY> startY){
            if($(window).scrollTop() <= 0){
                $(".preloader").hide();
                //此处后台请求刷新数据
            }
        }
        tempY = 0;
    }

</script>
</body>
</html>

最近在用web做app应用的时候要模拟Android下拉加载，用到了touch事件
不使用touchend是因为在Android4.0之后的浏览器里不支持touchend事件

彬彬快跑
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5 下拉刷新(pc+移动网页源码）
LG_227的博客
04-25 1431
本文demo下载地址：http://www.wisdomdd.cn/Wisdom/resource/articleDetail.htm?resourceId=1071本文实现在html5网页中使用下拉功能自动刷新显示更多内容, 使用jquery捕捉和处理相应的鼠标事件, 例如内容在顶部时，触发下拉事件后显示更多内容; 如内容在页面底部时，鼠标滚轮到最底部时处罚事件后显示更多内容, 详情下载实例后亲...
Html5模拟android上拉/下拉刷新
热门推荐
谢彬のCSDN专栏
09-11 4万+
参考地址：maxzhang/dragloader
HTML5模拟原生APP上拉加载，下拉刷新
12-18
HTML5模拟原生APP上拉加载，下拉刷新HTML5模拟原生APP上拉加载，下拉刷新
HTML5模拟APP上拉刷新下拉加载
12-18
HTML5模拟APP上拉刷新下拉加载.HTML5模拟APP上拉刷新下拉加载.
html5+css3实现手机下拉和下拉刷新
anshezan7542的博客
04-05 326
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale...
移动端下拉刷新原理和实例
weixin_34258078的博客
07-31 418
移动端的下拉刷新是一个很常见的功能，也有许多开源库实现了这个功能，不过为了学习，还是先自己写一个例子学习一下。其中用到了一些touch事件和一些DOM属性CSS3属性。直接上代码，代码里面有注释。 <!DOCTYPE html> <html lang="en"> <head> <meta...
Html5模拟android上拉/下拉刷新需要的js文件
07-21
dragloader.js是一个面向移动Web开发的JavaScript库，帮助开发者在使用页面原生滚动时，模拟上/下拉手势，实现Pull to Request操作。 dragloader.js是一个面向移动Web开发的JavaScript库，帮助开发者在使用页面原生...
Android自定义下拉刷新控件RefreshableView
09-01
在Android开发中，下拉刷新（Pull-to-Refresh）是一个常用的功能，允许用户通过向下拉动视图来触发数据的更新。本篇文章将详细介绍一个自定义的下拉刷新控件——RefreshableView，它支持所有类型的控件，包括...
Android自定义控件下拉刷新实例代码
09-01
最后，为了使下拉刷新功能更加平滑，你可能还需要添加动画效果，例如平滑地旋转箭头以模拟刷新过程，或者使用`ObjectAnimator`来改变组件的透明度和位置。 总的来说，Android自定义控件的下拉刷新涉及到以下几个...
Android下拉刷新官方版
01-20
本篇文章将深入讲解如何使用`SwipeRefreshLayout`实现Android下拉刷新。 首先，`SwipeRefreshLayout`是Android Support Library中的一个布局容器，它允许用户通过向下滑动内容视图来触发刷新操作。在布局文件中，...
物联网工程_基于RFID的食堂食品安全监测系统设计.docx
07-20
物联网工程_基于RFID的食堂食品安全监测系统设计
VisualSVN-VS2022
最新发布
07-20
VisualSVN-VS2022-8.0.5.vsix SVNVS插件，使用VS自带更新速度太慢，可下载后直接安装即可
基于PSO优化的BP神经网络训练与测试matlab仿真，包括程序，注释，参考文献，操作步骤
07-20
1.版本：matlab2022A。 2.包含：程序，中文注释，参考文献，仿真操作步骤（使用windows media player播放）。 3.领域：PSO优化的BP神经网络 4.仿真效果：仿真效果可以参考博客同名文章《基于PSO优化的BP神经网络训练与测试matlab仿真》 5.内容：基于PSO优化的BP神经网络训练与测试matlab仿真。粒子群优化（Particle Swarm Optimization, PSO）结合BP（Backpropagation）神经网络是一种常见的优化方法，用于提升神经网络的学习能力和泛化能力。PSO不仅帮助BP神经网络找到了一个较好的初始解，从而可能加快了训练过程并提高了最终模型的质量，而且还能探索到更广泛的解空间，有助于避免局部最优解。 6.注意事项：注意MATLAB左侧当前文件夹路径，必须是程序所在文件夹位置，具体可以参考视频录。
超详细讲C++cout语句
07-20
超详细讲C++cout语句，专门为C++初学者录制。
java基于ssm+jsp网络安全宣传网站系统源码 带毕业论文
07-20
【资源说明】 1、开发环境：ssm框架；内含Mysql数据库；JSP技术 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
java基于ssm+jsp奶茶店管理系统源码 带毕业论文
07-20
【资源说明】 1、开发环境：ssm框架；内含Mysql数据库；JSP技术 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
[课设项目]Java-SSM框架开发框架的安全教育平台+vue+MySQL+前后端分离毕业论文和源码.zip
07-20
本项目是一个基于Java-SSM框架开发的安全教育平台，采用前后端分离的设计理念，前端使用Vue框架，后端则采用SSM框架进行搭建。项目旨在提供一个全面、安全的教育平台，以满足计算机相关专业学生毕业设计的需求，同时也为Java学习者提供实战练习的机会。 资源包中包含了完整的项目源码、数据库脚本以及详细的开发说明，更有论文参考，助力开发者顺利完成项目并可作为毕设作品提交。项目已历经严格的调试过程，确保在JDK、IDEA和Tomcat的开发环境下能够稳定运行。 对于有一定Java基础的学习者而言，这个项目不仅提供了一个现成的实战案例，更可以在其基础上进行创新和改进，实现更多个性化功能，从而提升技术水平和解决实际问题的能力。无论是毕业设计还是日常学习，这都是一个极具价值的资源。请放心下载使用，相信它会为你带来不少帮助。
【独家首发】Matlab实现减法平均优化算法SABO优化Transformer-BiLSTM实现负荷数据回归预测.rar
07-20
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
通用Android下拉刷新控件实现与自定义接口
本文档详细介绍了如何在Android应用中实现一个通用的下拉刷新控件，支持所有类型的View，特别是针对ListView和RecyclerView之外的需求。作者首先提到了早期常见的库如PullToRefresh及其变体，但随着技术的发展，有了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值