使用下拉加载

使用需要引用的css

<link rel="stylesheet" href="../dist/dropload.css">

使用需要引用的js

<!-- jQuery1.7以上 或者 Zepto 二选一,不要同时都引用 -->
<script src="js/zepto.min.js"></script>
<script src="../dist/dropload.min.js"></script>

使用方法:网上有很多再次就不展开了

主要记录一下bug以及修改

1.bug:刚进去页面的时候出现上拉加载字样,然后上拉页面才会出现加载中...

理想效果:刚进来页面直接是加载中...字样

bug原因以及修改:原因是给本区域的最外层div设置了高度,把设置的高度去掉就可以了。还有一个原因可能是提前加载距离threshold:50   数字可以大一点,修改为100。

2.由于部分Android中UC和QQ浏览器头部有地址栏,并且一开始滑动页面隐藏地址栏时,无法触发scroll和resize,所以会导致部分情况无法使用。

解决方案1:增加distance距离,例如DEMO2中distance:50;

解决方案2:加meta使之全屏显示

<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">

 

下拉加载dropload.js的更多相关文章

  1. 手机网站下拉加载数据js(简单版)

    加载内容的地方html <div class="bgcolor_f0 clearfix"> <div class="recharge"> ...

  2. dropload.js下拉加载更多

    项目中有用到下拉加载更多的地方,去网上找了一个插件,地址:http://ons.me/526.html总体还是不错的,可能自己不是特别了解这个插件,做项目时,也是遇到了无数问题.项目中要用的是两个ta ...

  3. 移动端好用的下拉加载上拉刷新插件 dropload插件

    入了很多下拉加载上拉刷新的插件,但是感觉都不好用,知道最近遇到这款dropload的插件,瞬间打开新世界的大门啊,无卡顿简单易用可配置 <!doctype html> <html&g ...

  4. 原生JS下拉加载插件分享。

    无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",functio ...

  5. 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

  6. iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战

    上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...

  7. 下拉加载更多DEMO(js实现)

    项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判 ...

  8. js 下拉加载

    // 下拉加载    var clientHeight = $(window).height() //当前可视的页面高度    console.log(clientHeight) //滚动条到页面底部 ...

  9. H5页面下拉加载更多(实用版)

    近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有.   醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件  还可以,但是 ...

随机推荐

  1. Firemonkey里触发home按键被按下的事件

    吾八哥我最近在使用Delphi里的Firemonkey平台写一个叫“由由密码管家”的APP工具,是跨多平台的,如ios/android/windows/macOs.由于是用于密码管理的,那么在手机里操 ...

  2. Jersey Client Post Bean参数

    代码: public static void main(String[] args) { Student st = new Student("Adriana", "Bar ...

  3. (C#)字符串反转

    方法一: public static string Reverse(string name) {     if (String.IsNullOrEmpty(name))       {        ...

  4. Linq to sql中使用DateDiff()

    Linq to sql中使用DateDiff() 计算时间差的方法 第一种办法: from p in PurchaseLists where EntityFunctions.DiffDays(p.Cr ...

  5. Unix下cp、tar、sudo命令的使用

    环境 Ubuntu14.04 (这里用这样一个类Unix系统来代替Unix,sudo命令也是linux下的一个命令) 实例 : Ubuntu firefox flash插件的安装 到Adobe下载ta ...

  6. s11 day 101 python Linux环境安装 与路飞项目支付功能

    from django.conf.urls import urlfrom django.contrib import adminfrom app01 import viewsurlpatterns = ...

  7. JSOI2010 满汉全席

    题目链接:戳我 一个2-SAT的模板题. (什么是2-SAT呢?就是解决一个情况两种决策的问题,我们根据"选了其中一个点A就必须选一个点B的原则,从A向B连边.最后判断如果在一个强连通分量里 ...

  8. MySQL(增删改查补充)

    SQL语句数据行操作补充             create table tb12(                 id int auto_increment primary key,       ...

  9. RabbitMQ交换机规则实例

    RabbitMQ Exchange分发消息时根据类型的不同分发策略有区别,目前共四种类型:direct.fanout.topic.headers .headers 匹配 AMQP 消息的 header ...

  10. js闭包之我见

    很久前的一个问题终于得以解决,内心是无比喜悦的,不多说,先上代码: function test(){ for(var i=0;i<5;i++){ window.onclick=function( ...