javascript-- 基于jQuery的模仿移动端上拉加载更多控件

简单实现手机端上拉加载更多,通过触发trigger()事件,触发原先已经写好的请求

css样式

.more{
                padding: 10px 10px;
                height:50px;
                background:#fff;
                background-clip:content-box;
                text-align: center;
                line-height:50px;
                font-family:"Microsoft Yahei";
                display: none;
            }

html代码

        <div class="more" data-page="1" data-rname="">
            加载更多
        </div>
        

js代码

 1 /**
 2  *实现滚动效果
 3  */
 4 $(function(){
 5     var clientH = $(window).height();//屏幕高度
 6     var h =$(document).height()- $(window).scrollTop();
 7     var timer = null;
 8     $(window).on("touchmove",function(){
 9         var scrollH = $(document).height();
10         h = scrollH-$(this).scrollTop();
11         if(clientH >= h){
12             $(".more").show();
13             timer = setTimeout(function(){
14                 $(".more").html("松开加载");
15             }, 1000);
16         }else if(clientH >= h-$(".more").height()){
17
18             $(".more").html("加载更多");
19             $(".more").hide();
20         }
21     });
22     //记录开始按下到松开的时间
23
24     var startTime, endTime;
25     $(window).on("touchstart",function(event){
26         startTime = new Date().getTime();
27         $(".more").html("加载更多");
28     });
29     $(window).on("touchend",function(event){
30         h =$(document).height()- $(window).scrollTop();
31         if(clientH >= h){
32             endTime = new Date().getTime();
33             if(endTime - startTime > 900){
34                 $(".more").trigger("click");
35                 $(".more").show();
36                 $(".more").html("加载中...");
37             }else{
38                 clearTimeout(timer);
39                 $(".more").html("加载更多");
40                 $(".more").hide();
41
42             }
43         }else{
44             clearTimeout(timer);
45             $(".more").html("加载更多");
46             $(".more").hide();
47
48         }
49
50     });
51 });
时间: 2024-11-10 14:16:37

javascript-- 基于jQuery的模仿移动端上拉加载更多控件的相关文章

移动端--上拉加载更多

在移动端上经常有很多,上拉加载很多的 需求 这个不知道是哪个群友总结的发到群里的 作为日后参考的demo,仅此留念. 下载链接:http://files.cnblogs.com/files/leshao/%E4%B8%8A%E6%8B%89%E5%8A%A0%E8%BD%BD%E6%9B%B4%E5%A4%9Ademo.rar

IOS-给UIScrollView(包括继承它的UITableView、UICollectionView)添加下拉刷新-上拉加载更多

IOS里面用到的下拉刷新.上拉加载更多控件,开源的第三方框架很多,我们可以直接拿过来用,别人造好的轮子我们就没有必要再造一遍了,这里推荐几款下拉刷新.上拉加载更多控件 只有下拉刷新的: 一.EGOTableViewPullRefresh 这个使用起来比较麻烦,需要实现其各种协议,github地址为: https://github.com/enormego/EGOTableViewPullRefresh 这个貌似有个扩展上拉加载更多的,有时间补上 二.PullToRefresh  这个使用起来比E

Android 开发 上拉加载更多功能实现

实现思维 开始之前先废话几句,Android系统没有提供上拉加载的控件,只提供了下拉刷新的SwipeRefreshLayout控件.这个控件我们就不废话,无法实现上拉刷新的功能.现在我们说说上拉加载更多的功能实现 思维步骤: 首先需要创建一个叫页尾的布局文件,它用来在列表的最后面显示使用 接着我们需要想办法在RecyclerView的适配器里导入这个页尾布局.你的列表内容适配器的普通item该如何实现还是如何实现. 为了导入这个页尾布局,我们需要在导入的List长度+1,因为这个页尾布局是另外加

移动端touch事件 || 上拉加载更多

前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误的姿势,例如长按后再touchmove等会出现卡死的假象.(ps:当然, 我不认为是插件的问题,当时的想法是觉得引用的插件存在冲突),于是,我就直接通过封装touch事件完成上拉加载实现分页的功能. 备注:文章最后会加上为实现这个功能我找的一些插件 了解touch事件 在应用touch事件实现上拉加

原生js移动端touch事件实现上拉加载更多

大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: 1 //获取要操作的元素 2 var objSection = document.getElementsByTagName("div")[0]; 3 //给元素绑定监听事件 个人习惯把监听事件写在一块 4 objSection.addEventListener("touchstart", touchStart, false); 5 objSect

vux-scroller实现移动端上拉加载功能

本文将讲述vue-cli+vux-scroller实现移动端的上拉加载功能: 纠错声明:网上查阅资料看到很多人都将vux和vuex弄混,在这里我们先解释一下,vuex是vue框架自带的组件,是数据状态管理工具,vux是一款移动端的UI组件库: vux(官方文档:https://doc.vux.li/zh-CN/)是基于WeUi和vue(2.x)开发的移动端的UI组件库,主要服务于微信页面.基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在We

vue2.0 移动端,下拉刷新,上拉加载更多插件,修改版

在[实现丰盛]的插件基础修改[vue2.0 移动端,下拉刷新,上拉加载更多 插件], 1.修改加载到尾页面,返回顶部刷新数据,无法继续加重下一页 2.修改加载完成文字提示 原文链接:http://www.cnblogs.com/sichaoyun/p/6647458.html <template lang="html"> <div class="yo-scroll" :class="{'down':(state===0),'up':(st

【前端】上拉加载更多dropload.min.js的使用

代码如下:入职代码修改接口及html为自己的即可(下面主要展示js部分) <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum

Andorid上拉加载更多的几种实现方式

1.前言 Andriod中上拉加载更多的效果随处可见,因为一次性要展现的数据太多信息量太大的话,给用户的体验就很差(加载慢,界面卡顿.流量消耗大等),而加载更多可以控制每次加载条目的数量以达到快速加载,底部加载更多的方式就显得更人性化,今天就把用过的几种方式总结一下. 2.上拉加载更多的实现方式 ListView控件;作为一种传统列表展现的方式,ListView控件的addHeaderView(...).addFooterView(...)方法很方便的支持头布局.脚布局,参数就是打气筒打出来的布