<!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>
This is a 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, {
probe type: 2,
bounceTime: 700, // recovery time
pullUpLoad: {
threshold: 10 // When the pull from the box than the height of 10px when the event will be distributed on a Raja uploaded
},
pullDownRefresh:{
threshold: -10 // When the drop-down 10px longer than the height from the top of the box when you distribute a pull-down refresh event
},
useTransition: false // iphone prevent micro-channel slide Caton
});
Scroll.on ( "pullingUp", function () {// upload events on Raja
the console.log ( 'load data ajax');
Scroll.finishPullUp (); // can perform many times on Raja carrier, did not pull this code will only be loaded once on
});
Scroll.on ( "pullingDown", function () {// drop-down refresh event
the console.log ( 'drop-down refresh data');
Scroll.finishPullDown () // You can perform multiple pull-down refresh, refresh not only under this code
});
Scroll.refresh (); // initialize demo when asynchronously loading the data, re-render the page, this code is very important
</script>