上拉刷新简版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box{
width: 300px;
height: 500px;
border:1px solid red;
overflow: hidden;
}
#box div{
width: 100%;
height: 800px;
background: #999;
}
</style>
</head>
<body>
<div id="box">
<div>
这是一个better-scroll demo
</div>
</div>
</body>
</html>
<script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script>
<script>
var warpper = document.getElementById('box')
var Scroll = new BScroll(warpper, {
probeType: 2,
bounceTime:700, //回弹时间
pullUpLoad: {
threshold: 10 //当上拉距离超过盒子高度的10px的时候,就派发一个上拉加载的事件
},
pullDownRefresh:{
threshold: -10 //当下拉长度距离盒子顶部的高度超过10px的时候,就派发一个下拉刷新的事件
},
useTransition:false // 防止iphone微信滑动卡顿
});
Scroll.on("pullingUp",function(){ //上拉加载事件
console.log('加载ajax数据');
Scroll.finishPullUp();//可以多次执行上拉加载，没有这段代码上拉只会加载一次
});
Scroll.on("pullingDown",function(){ //下拉刷新事件
console.log('下拉刷新数据');
Scroll.finishPullDown()//可以多次执行下拉刷新，没有这段代码下只会刷新一次
});
Scroll.refresh();//初始化demo 当异步加载数据的时候，重新渲染页面，这段代码非常重要
</script>
