上一篇文章记录了我用原生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。
- npm insall --save pullreload
- 在文件中这样使用即可
import pullreload from 'pullreload';
var pull = new pullreload({
content:'content',
ptr:'ptr',
callback:function(){
console.log('123');
}
});
pull.start();
issues
本人小菜鸟一枚,用原生写了一个简单的上拉加载,也算体验了一把npm,原生js组件的玩法,还有很多不足,欢迎issues