热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Listloading.js移动端上拉下拉刷新组件

这篇文章主要介绍了Listloading.js移动端上拉下拉刷新组件的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

listloading是一个移动端的上拉、下拉加载更多的组件。主要依赖于iscroll.js v5.1.2基础上开发的组件,基础库可以使用jquery.js或者zepto.js操作dom节点,目前我是使用了zepto.js作为基础库操作dom,以jquery插件的形式存在。如果不想以插件方式使用,则只需要把listloading直接移植你需要的库里面就ok啦。listloading主要针对移动端而生,在使用浏览器自带滚动,用户体验很不友好,与Android和ios差别甚远,所以选择iscroll.js,它实现方式是使用css3动画translate 2D 转换来实现滚动效果,transform属性使用硬件加速,性能方法得到很大提高。

npm安装

代码如下:

npm install -g listloading

使用方法如下:

1、html结构

与iscroll创建的结构一样,但是指定的创建的元素节点必须指定ID,因为在组件里面发布订阅模式需要做一个标识。因为iscroll在节点元素创建之前,必须先设定高度,否则会导致无法滚动;iscroll创建完毕是指定给第一个子元素滚动,所以listloading的上拉和下拉刷新也是追加到第一个子元素里面,其实把第一个子元素想象成为html里面的body就可以了。

2、需要引入的js



3、调用

var m = 3, n = 0;
// 创建iscroll之前必须要先设置父元素的高度,否则无法拖动iscroll
$('#listloading').height($(window).height());
// 模板或者ajax请求方法
var createHtml = function(){
var __html = '';
for(var i = 0; i <15; i++){
var now = new Date().getTime();
now = new Date(now + i*1000000);
__html += '
  • listloading' + (n++) + '

    移动端上拉下拉刷新组件...

  • '; } return __html; } // 选择器必须是ID 因为要用到发布订阅做标识 var listloading = $('#listloading').listloading({ disableTime: true, // 是否需要显示时间 pullUpAction : function(cb){ //上拉加载更多 m--; var flg = false; var __html = createHtml(); if(m <1){ flg = true; }else{ $('#order-list').append(__html); } // 数据加载完毕需要返回 end为true则为全部数据加载完毕 cb(flg); }, pullDownAction : function(cb){ //下拉刷新 m = 3; n = 0; var __html = createHtml(); $('#order-list').html(__html); // 执行完执行方法之后必须执行回调 回调的作用是通知默认加载已经全部执行完毕,程序需要去创建iscroll cb(); }, // iscroll的API iscrollOptions: { // } }); // 点击事件 因为iscroll阻止了冒泡,它也建议自己写点击方法,如果开启preventDefault为false这行就是解决onclick失效问题, 但是开启这个值在微信下面拖动会有问题 滑动结束之后触发不到scrollend,所以我自己内嵌了一个事件方法 listloading.evt('li', 'click', function (dom) { // dom.remove(); // $('#order-list').append(createHtml()); // listloading.refresh(); });

    效果图

    /p>

    4、API

    4.1 下拉刷新

    初始化会执行一次,主要是创建iscroll,之后每次下拉刷新结束之后执行,当在方法里面执行完毕你的程序之后需要执行一个回调函数,告知已经全部程序执行完毕,listloading就会自动去调用iscroll的刷新功能,回调不需要传参。

    options.pullDownAction = function(cb){ //下拉刷新
    .....
    // 执行完执行方法之后必须执行回调
    cb();
    }

    4.2 上拉刷新

    每次上拉刷新结束之后执行,同样的在执行完你的程序之后需要执行一个回调函数,回调里面需要回调一个布尔值,如果为true则怎么已经全部加载完毕,就已经拉到底了。

    options.pullUpAction = function(cb){ //下拉刷新
    .....
    // 执行完执行方法之后必须执行回调 true为下拉到底
    cb(true);
    }

    4.3 销毁ListLoading

    代码如下:

    listloading.destroy();

    4.4 刷新listloading

    滚动区域节点有增删则需要在操作完毕之后调用此方法

    代码如下:

    listloading.refresh();

    4.5 是否显示时间 默认值为false

    true下拉显示时间,距离上次刷新的时间

    代码如下:

    options.disableTime = true

    4.6 上拉刷新文字

    代码如下:

    options.upLoadmoretxt = '上拉刷新文字'; // 里面可以放html标签

    4.7 下拉刷新文字

    代码如下:

    options.pullDrefreshtxt = '下拉刷新文字'; // 里面可以放html标签

    4.8 正在加载中文字

    代码如下:

    options.loadertxt = '正在加载中文字'; // 里面可以放html标签

    4.9 松开刷新文字

    代码如下:

    options.Realtimetxt = '松开刷新文字'; // 里面可以放html标签

    4.10 已经全部加载完毕文字

    代码如下:

    options.loaderendtxt = '已经全部加载完毕文字'; // 里面可以放html标签

    4.12 iscroll的配置

    代码如下:

    options.iscrollOptiOns= {};

    以上所述是小编给大家介绍的Listloading.js移动端上拉下拉刷新组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


    推荐阅读
    • 本文提供了一个详尽的前端开发资源列表,涵盖了从基础入门到高级应用的各个方面,包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
    • 如何高效渲染JSON数据
      本文介绍了在控制器中返回JSON结果的方法,并详细说明了如何利用jQuery处理和展示这些数据,为Web开发提供了实用的技巧。 ... [详细]
    • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
    • 二维码的实现与应用
      本文介绍了二维码的基本概念、分类及其优缺点,并详细描述了如何使用Java编程语言结合第三方库(如ZXing和qrcode.jar)来实现二维码的生成与解析。 ... [详细]
    • 本文介绍了用户界面(User Interface, UI)的基本概念,以及在iOS应用程序中UIView及其子类的重要性和使用方式。文章详细探讨了UIView如何作为用户交互的核心组件,以及它与其他UI控件和业务逻辑的关系。 ... [详细]
    • 本文由chszs撰写,详细介绍了Apache Mina框架的核心开发流程及自定义协议处理方法。文章涵盖从创建IoService实例到协议编解码的具体步骤,适合希望深入了解Mina框架应用的开发者。 ... [详细]
    • LeetCode 102 - 二叉树层次遍历详解
      本文详细解析了LeetCode第102题——二叉树的层次遍历问题,提供了C++语言的实现代码,并对算法的核心思想和具体步骤进行了深入讲解。 ... [详细]
    • 探讨了在HTML表单中使用元素代替进行表单提交的方法。 ... [详细]
    • 3DSMAX制作超现实的体育馆模型
      这篇教程是向脚本之家的朋友介绍3DSMAX制作超现实的体育馆模型方法,教程制作出来的体育馆模型非常地不错,不过教程有点难度,需要有一定基础的朋友学习,推荐到脚本之家,喜欢的朋友可 ... [详细]
    • 默认情况下,Git 使用 Nano 编辑器进行提交信息的编辑,但如果您更喜欢使用 Vim,可以通过简单的配置更改来实现这一变化。本文将指导您如何通过修改全局配置文件来设置 Vim 作为默认的 Git 提交编辑器。 ... [详细]
    • 探讨如何在映射文件中处理重复的属性字段,以避免数据操作时出现错误。 ... [详细]
    • 网络流24题——试题库问题
      题目描述:假设一个试题库中有n道试题。每道试题都标明了所属类别。同一道题可能有多个类别属性。现要从题库中抽取m道题组成试卷。并要求试卷包含指定类型的试题。试设计一个满足要求的组卷算 ... [详细]
    • 本文探讨了程序员这一职业的本质,认为他们是专注于问题解决的专业人士。文章深入分析了他们的日常工作状态、个人品质以及面对挑战时的态度,强调了编程不仅是一项技术活动,更是个人成长和精神修炼的过程。 ... [详细]
    • 在1995年,Simon Plouffe 发现了一种特殊的求和方法来表示某些常数。两年后,Bailey 和 Borwein 在他们的论文中发表了这一发现,这种方法被命名为 Bailey-Borwein-Plouffe (BBP) 公式。该问题要求计算圆周率 π 的第 n 个十六进制数字。 ... [详细]
    • publicclassBindActionextendsActionSupport{privateStringproString;privateStringcitString; ... [详细]
    author-avatar
    迅驰代驾
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有