{"id":25009263,"url":"https://github.com/gtdalp/listloading","last_synced_at":"2025-04-10T04:56:48.574Z","repository":{"id":88854592,"uuid":"64908384","full_name":"gtdalp/listloading","owner":"gtdalp","description":"listloading是一个移动端的上拉、下拉加载更多的组件。主要依赖于iscroll.js v5.1.2基础上开发的组件，基础库可以使用jquery.js或者zepto.js操作dom节点，目前我是使用了zepto.js作为基础库操作dom，以jquery插件的形式存在。如果不想以插件方式使用，则只需要把listloading直接移植你需要的库里面就ok啦。listloading主要针对移动端而生，在使用浏览器自带滚动，用户体验很不友好，与Android和ios差别甚远，所以选择iscroll.js，它实现方式是使用css3动画translate 3D 转换来实现滚动效果，transform属性使用硬件加速，性能方法得到很大提高。 https://gtdalp.github.io/widget/listloading/demos/listloading.html","archived":false,"fork":false,"pushed_at":"2018-08-27T13:57:12.000Z","size":13251,"stargazers_count":173,"open_issues_count":5,"forks_count":74,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-03T03:11:10.346Z","etag":null,"topics":["app","html5","iscroll","iscroll5-pull-to-refresh","javascript","refresh","scroll","web-app"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gtdalp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-08-04T06:26:14.000Z","updated_at":"2025-02-11T15:49:34.000Z","dependencies_parsed_at":"2023-07-12T01:33:50.102Z","dependency_job_id":null,"html_url":"https://github.com/gtdalp/listloading","commit_stats":{"total_commits":64,"total_committers":4,"mean_commits":16.0,"dds":0.0625,"last_synced_commit":"ad13639781bc9d81d7cf254772ed5b84d9a91a91"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gtdalp%2Flistloading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gtdalp%2Flistloading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gtdalp%2Flistloading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gtdalp%2Flistloading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gtdalp","download_url":"https://codeload.github.com/gtdalp/listloading/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248161261,"owners_count":21057554,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["app","html5","iscroll","iscroll5-pull-to-refresh","javascript","refresh","scroll","web-app"],"created_at":"2025-02-05T04:39:05.681Z","updated_at":"2025-04-10T04:56:48.554Z","avatar_url":"https://github.com/gtdalp.png","language":"JavaScript","readme":"# listloading.js \nlistloading是一个移动端的上拉、下拉加载更多的组件。主要依赖于iscroll.js v5.1.2基础上开发的组件，基础库可以使用jquery.js或者zepto.js操作dom节点，目前我是使用了zepto.js作为基础库操作dom，以jquery插件的形式存在。如果不想以插件方式使用，则只需要把listloading直接移植你需要的库里面就ok啦。listloading主要针对移动端而生，在使用浏览器自带滚动，用户体验很不友好，与Android和ios差别甚远，所以选择iscroll.js，它实现方式是使用css3动画translate 3D 转换来实现滚动效果，transform属性使用硬件加速，性能方法得到很大提高。支持Node引入，require引入.\n\n\n## 效果图:\n![demo1.png](./v1.2.2/src/images/demo1.png)\n![demo2.png](./v1.2.2/src/images/demo2.png)\u003cbr/\u003e \u003cbr/\u003e\n![demo.gif](./v1.2.2/src/images/demo.gif)![qcode1.png](./v1.2.2/src/images/qcode1.png)\u003cbr/\u003e \u003cbr/\u003e\n## demo地址: \u003ca href=\"https://gtdalp.github.io/widget/listloading/demos/listloading.html\"\u003ehttps://gtdalp.github.io/widget/listloading/demos/listloading.html\u003c/a\u003e\n\n\n\n## npm安装\n```javascript\nnpm install listloading\n```\n\n\n## 使用方法如下：\n\n### 1、html结构\n```html\n\u003cdiv id=\"listloading\"\u003e\n    \u003cdiv\u003e\n        \u003cul id=\"order-list\"\u003e\u003c/ul\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n与iscroll创建的结构一样，但是指定的创建的元素节点必须指定ID，因为在组件里面发布订阅模式需要做一个标识。因为iscroll在节点元素创建之前，必须先设定高度，否则会导致无法滚动；iscroll创建完毕是指定给第一个子元素滚动，所以listloading的上拉和下拉刷新也是追加到第一个子元素里面，其实把第一个子元素想象成为html里面的body就可以了。\n\n\n### 2、需要引入的js\n```javascript\n\u003cscript src=\"../src/jslib/zepto.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"../src/jslib/iscroll.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"../build/listloading.min.js\"\u003e\u003c/script\u003e\n```\n\n### 3、调用\n```javascript\nvar Listloading = require('listloading');\nvar m = 3;\nvar n = 0;\nvar hei = $(window).height();\n// 创建iscroll之前必须要先设置父元素的高度，否则无法拖动iscroll\n$('#listloading, .listloadingClass').height(hei);\n\n// 模板\nvar createHtml = function(){\n    var __html = '';\n    for(var i = 0; i \u003c 15; i++){\n        var now = new Date().getTime();\n        now = new Date(now + i*1000000);\n\n        __html += '\u003cli\u003e\u003cspan class=\"icon\"\u003e\u003c/span\u003e\u003cp class=\"title\"\u003e\u003ctime class=\"r\"\u003e' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds() + '\u003c/time\u003elistloading' + (n++) + '\u003c/p\u003e\u003cp class=\"text\"\u003e移动端上拉下拉刷新组件...\u003c/li\u003e';\n    }\n    return __html;\n}\n// demo\nvar listloading = new Listloading('#listloading', {\n    disableTime: true,  // 是否需要显示时间\n    pullUpAction : function(cb){   // 上拉加载更多\n        m--;\n        var flg = false;\n        var __html = createHtml();\n        if(m \u003c 1){\n            flg = true;\n        }else{\n            $('#order-list').append(__html);\n        }\n        // 数据加载完毕需要返回 end为true则为全部数据加载完毕\n        cb(flg);\n        \n    },\n    pullDownAction : function(cb){  // 下拉刷新\n        // true则为默认加载 false为下拉刷新\n        if (flg) {\n            console.log('默认加载');\n        }\n        m = 3;\n        var __html = createHtml();\n        $('#order-list').html(__html);\n        // 执行完执行方法之后必须执行回调 回调的作用是通知默认加载已经全部执行完毕，程序需要去创建iscroll或者做下拉刷新动作\n        cb();\n    },\n    // iscroll的API \n    iscrollOptions: {\n        //\n    }\n});\n\n// 点击事件\nlistloading.evt('li', 'click', function (dom) {\n    dom.remove();\n    // $('#order-list').append(createHtml());\n    listloading.refresh();\n});\n// demo\n// var k = 3;\n// var listloadingClass = new Listloading('.listloadingClass', {\n//     pullUpAction : function(cb){   //上拉加载更多\n//         k--;\n//         var flg = false;\n//         var __html = createHtml();\n//         if(k \u003c 1){\n//             flg = true;\n//         }else{\n//             $('#listloadingClass-order-list').append(__html);\n//         }\n//         // 数据加载完毕需要返回 end为true则为全部数据加载完毕\n//         cb(flg);\n        \n//     },\n//     pullDownAction : function(cb, flag){  //下拉刷新\n//         // flag 为true 第一次加载\n//         if (flag) {\n//             // dosomething...\n//         }\n//         k = 3;\n//         var __html = createHtml();\n//         $('#listloadingClass-order-list').html(__html);\n//         // 执行完执行方法之后必须执行回调 回调的作用是通知默认加载已经全部执行完毕，程序需要去创建iscroll或者做下拉刷新动作\n//         cb();\n//     }\n// });\n```\n\n### 4、API\n\n###### 4.1 下拉刷新\n初始化会执行一次，主要是创建iscroll，之后每次下拉刷新结束之后执行，当在方法里面执行完毕你的程序之后需要执行一个回调函数，告知已经全部程序执行完毕，listloading就会自动去调用iscroll的刷新功能，回调不需要传参。\n\n```javascript\noptions.pullDownAction = function(cb, flag){  // 下拉刷新\n    // flag 为true 第一次加载\n    if (flag) {\n        // dosomething...\n    }\n    // 执行完执行方法之后必须执行回调\n    cb();\n}\n```\n\n\n###### 4.2 上拉加载更多\n每次上拉加载更多结束之后执行，同样的在执行完你的程序之后需要执行一个回调函数，回调里面需要回调一个布尔值，如果为true则怎么已经全部加载完毕，就已经拉到底了。\n\n```javascript\noptions.pullUpAction = function(cb){  // 上拉加载更多\n    .....\n    // 执行完执行方法之后必须执行回调 true为上拉到底\n    cb(true);\n}\n```\n\n###### 4.3 销毁ListLoading\n\n```javascript\nlistloading.destroy();\n```\n\n###### 4.4 刷新listloading\n滚动区域节点有增删则需要在操作完毕之后调用此方法\n\n```javascript\nlistloading.refresh();\n```\n\n###### 4.5 是否显示时间 默认值为false\ntrue下拉显示时间，距离上次刷新的时间\n```javascript\noptions.disableTime = true\n```\n\n###### 4.6 上拉加载更多文字\n\n```javascript\noptions.upLoadmoretxt = '上拉加载更多文字';  // 里面可以放html标签\n```\n\n\n###### 4.7 下拉刷新文字\n\n```javascript\noptions.pullDrefreshtxt = '下拉刷新文字'; // 里面可以放html标签\n```\n\n###### 4.8 正在加载中文字\n\n```javascript\noptions.loadertxt = '正在加载中文字'; // 里面可以放html标签\n```\n\n\n###### 4.9 松开刷新文字\n\n```javascript\noptions.Realtimetxt = '松开刷新文字'; // 里面可以放html标签\n```\n\n###### 4.10 已经全部加载完毕文字\n\n```javascript\noptions.loaderendtxt = '已经全部加载完毕文字'; // 里面可以放html标签\n```\n\n###### 4.12 iscroll的配置\n```javascript\noptions.iscrollOptions = {};\n```\n### 目录结构\nlistloading\n```javascript\n├────build\n|      └──listloading.js           // 源文件\n├────demos\n|      └──....                     // demo字体样式\n├────dist\n|      |──css\n|      |   └──listloading.min.css  // 压缩css\n|      └──js\n|          └──listloading.min.js   // 压缩js源文件\n├────src\n|      |──css\n|      |    └──base.css            // 基础base样式\n|      |──fontface        \n|      |     └──...                // 字体文件\n|      |──images                  \n|      |     └──...                // demo图片\n|      |──jslib\n|      |     └── ...               // 第三方库\n```\n\n### 欢迎贡献你的代码\n在这里特别感谢 [microlv](https://github.com/microlv) 的技术支持和代码贡献\n\n### License\nCopyright (c) gtdalp. All rights reserved.\n\nLicensed under the MIT License.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgtdalp%2Flistloading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgtdalp%2Flistloading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgtdalp%2Flistloading/lists"}