Giter Site home page Giter Site logo

gtdalp / listloading Goto Github PK

View Code? Open in Web Editor NEW
171.0 9.0 74.0 12.94 MB

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

JavaScript 72.48% CSS 15.85% HTML 9.63% Vue 2.04%
javascript web-app iscroll5-pull-to-refresh iscroll scroll refresh app html5

listloading's Introduction

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 3D 转换来实现滚动效果,transform属性使用硬件加速,性能方法得到很大提高。支持Node引入,require引入.

效果图:

demo1.png demo2.png

demo.gifqcode1.png

npm安装

npm install listloading

使用方法如下:

1、html结构

<div id="listloading">
    <div>
        <ul id="order-list"></ul>
    </div>
</div>

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

2、需要引入的js

<script src="../src/jslib/zepto.min.js"></script>
<script src="../src/jslib/iscroll.js"></script>
<script src="../build/listloading.min.js"></script>

3、调用

var Listloading = require('listloading');
var m = 3;
var n = 0;
var hei = $(window).height();
// 创建iscroll之前必须要先设置父元素的高度,否则无法拖动iscroll
$('#listloading, .listloadingClass').height(hei);

// 模板
var createHtml = function(){
    var __html = '';
    for(var i = 0; i < 15; i++){
        var now = new Date().getTime();
        now = new Date(now + i*1000000);

        __html += '<li><span class="icon"></span><p class="title"><time class="r">' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds() + '</time>listloading' + (n++) + '</p><p class="text">移动端上拉下拉刷新组件...</li>';
    }
    return __html;
}
// demo
var listloading = new 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){  // 下拉刷新
        // true则为默认加载 false为下拉刷新
        if (flg) {
            console.log('默认加载');
        }
        m = 3;
        var __html = createHtml();
        $('#order-list').html(__html);
        // 执行完执行方法之后必须执行回调 回调的作用是通知默认加载已经全部执行完毕,程序需要去创建iscroll或者做下拉刷新动作
        cb();
    },
    // iscroll的API 
    iscrollOptions: {
        //
    }
});

// 点击事件
listloading.evt('li', 'click', function (dom) {
    dom.remove();
    // $('#order-list').append(createHtml());
    listloading.refresh();
});
// demo
// var k = 3;
// var listloadingClass = new Listloading('.listloadingClass', {
//     pullUpAction : function(cb){   //上拉加载更多
//         k--;
//         var flg = false;
//         var __html = createHtml();
//         if(k < 1){
//             flg = true;
//         }else{
//             $('#listloadingClass-order-list').append(__html);
//         }
//         // 数据加载完毕需要返回 end为true则为全部数据加载完毕
//         cb(flg);
        
//     },
//     pullDownAction : function(cb, flag){  //下拉刷新
//         // flag 为true 第一次加载
//         if (flag) {
//             // dosomething...
//         }
//         k = 3;
//         var __html = createHtml();
//         $('#listloadingClass-order-list').html(__html);
//         // 执行完执行方法之后必须执行回调 回调的作用是通知默认加载已经全部执行完毕,程序需要去创建iscroll或者做下拉刷新动作
//         cb();
//     }
// });

4、API

4.1 下拉刷新

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

options.pullDownAction = function(cb, flag){  // 下拉刷新
    // flag 为true 第一次加载
    if (flag) {
        // dosomething...
    }
    // 执行完执行方法之后必须执行回调
    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

├────build
|      └──listloading.js           // 源文件
├────demos
|      └──....                     // demo字体样式
├────dist
|      |──css
|      |   └──listloading.min.css  // 压缩css
|      └──js
|          └──listloading.min.js   // 压缩js源文件
├────src
|      |──css
|      |    └──base.css            // 基础base样式
|      |──fontface        
|      |     └──...                // 字体文件
|      |──images                  
|      |     └──...                // demo图片
|      |──jslib
|      |     └── ...               // 第三方库

欢迎贡献你的代码

在这里特别感谢 microlv 的技术支持和代码贡献

License

Copyright (c) gtdalp. All rights reserved.

Licensed under the MIT License.

listloading's People

Contributors

gtdalp avatar hapjs avatar microlv avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

listloading's Issues

下拉刷新不能执行

下拉刷新的代码无法执行

pullDownAction: function(cb) { // 下拉刷新
            // true则为默认加载 false为下拉刷新
            console.log('下拉刷新')
            alert(dddd')
            // 执行完执行方法之后必须执行回调 回调的作用是通知默认加载已经全部执行完毕,程序需要去创建iscroll或者做下拉刷新动作
            cb();
        }

第一次初始化会执行一次,之后的所有下拉操作,都不会再执行console.log和alert

nam引入listloading组件使用是js报错

nam install listloading -S后拷贝示例代码后报下面的错
listloading.js:402 Uncaught ReferenceError: IScroll is not defined(…)

难道此组件不适用npm引入吗

按上面走的,为么页面提示报错呢?

listloading.min.js?6eb4:1 Uncaught TypeError: Cannot set property 'Listloading' of undefined
我是这样引入的
import iscroll from "../../assets/js/iscroll.js"
import $ from 'n-zepto'
import listload from "../../assets/js/listloading.min.js"

下拉刷新 不执行

以下这个方便,下拉不回调
pullDownAction: function (cb, flg) { // 下拉刷新

同个页面多个下拉刷新有问题

也不知道是不是我写法问题,如果一个页面有tab,每个tab都要做下拉、上拉功能,我这边新建了多个实例,但是结果是除了第一个一开始显示的tab外,其他tab一直显示下拉刷新那个框框,且无法拖动

别的页面滑动不了

点击页面1,跳转到页面2,页面2中包含listloading功能,那么页面1就被定死不能滑动,希望能优化,这个bug比较致命

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.