下拉加载模块pullreload

上一篇文章记录了我用原生js封装下拉加载的过程,这一篇文章记录我最终的发布到npm上的包:pullreload。
第一次发布,过程中遇到问题也是有的,不过基本上百度就可以解决了。这里主要说下我包的使用及简单的介绍。

pullReload

实现的功能主要是上拉加载,demo,相关原理的简单介绍见这里;

如何使用

方法一

最简单的方法,就是直接从项目中下载src/pullreload.min.js或者src/pullreload.js。
在页面中引入,源代码见项目下的index.html

<div id='ptr'></div>
<div id="content">a long list that need to be refresh when pull down</div>
<script src="src/pullreload.min.js"></script>
<script>
  var pull = new pullReload({
    content:'content',//元素id,必须,表示拖动哪个元素进行下拉刷新
    ptr:'ptr',//元素id,必须,指定
    callback:function(){//回调,非必须,默认输出1,异步的话返回promise,同步无所谓
      //如浏览器不支持promise,则无法执行异步回调,建议配合webpack进行bundle
      console.log('123');
    }
  });
  pull.start();
</script>

方法二

配合webpack使用,webpack的参考依赖可以看本仓库中的webpack.config.js,主要是babel-loader和css-loader以及style-loader。

  1. npm insall --save pullreload
  2. 在文件中这样使用即可
import pullreload from 'pullreload';

var pull = new pullreload({
  content:'content',
  ptr:'ptr',
  callback:function(){
    console.log('123');
  }
});

pull.start();

issues

本人小菜鸟一枚,用原生写了一个简单的上拉加载,也算体验了一把npm,原生js组件的玩法,还有很多不足,欢迎issues

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,715评论 7 110
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,233评论 0 21
  • webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 6,515评论 2 71
  • 也许人生之美好,许多都源自于对生活的美好期许,农民辛勤耕种,想着到时节就可以春华秋实、硕果累累;新婚的小夫妻,满怀...
    凤凰未涅槃阅读 509评论 0 0
  • 买房、买车、存钱。当下的生活也许就是这样,每个人都像个倔强的战士一样屹立在这个叫做“社会”的战场。 科比曾在别人问...
    墨小凝阅读 970评论 0 0