better-scroll实现上拉加载demo
2018-08-04 本文已影响2277人
我是你军哥
better-scroll 文档地址：https://ustbhuangyi.github.io/better-scroll/#/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>better-scroll</title>
<style>
.wrap{width:200px;height:200px;overflow:hidden;border:1px solid #0a8ddf;}
.wrap .content{width:100px;height:auto;}
</style>
</head>
<body>
<div class="wrap">
<div class="content">
我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll我是better-scroll
</div>
</div>
<script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script>
<script>
var oScroll = new BScroll(".wrap", {
probeType: 2,
//下拉刷新：可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
//这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载
pullUpLoad: {
threshold: 10
},
mouseWheel: { // pc端同样能滑动
speed: 20,
invert: false
},
useTransition:false // 防止iphone微信滑动卡顿
});
oScroll.on("pullingUp",function(){
//alert('已到最底部');
console.log('加载ajax数据');
oScroll.finishPullUp();//可以多次执行上拉刷新
});
oScroll.refresh();
</script>
</body>
</html>
大家以后如果想找js插件的可以上https://www.npmjs.com/ 上搜索，排名靠前的一般都不错
