better-scroll代替iscroll目前流行的滚动插件附Demo教程
文件大小：4.51MB下载：1205次
better-scroll是什么?
better-scroll 是一款重点解决移动端（现已支持 PC 端）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。
由于目前最适合移动端开发的前端 mvvm 框架是 Vue，并且 better-scroll 可以很好的和 Vue 配合使用的，所以 demo 我都用 Vue 进行了重写。
应用场景：
1、横向滚动菜单
2、列表纵向滚动
3、上拉刷新
4、下拉刷新
5、Slide 组件
6、开屏引导
7、自由滚动
由于better-scroll的代码示例只有脚手架模式而且是基于vue的demo，如果想在cdn模式下使用官网没有提供demo，我把cdn模式下的代码示例写出来供大家参考。
<!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）
pullDownRefresh: {
threshold: 20,
stop: 0
},
//这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载
pullUpLoad: {
threshold: 10
},
mouseWheel: { // pc端同样能滑动
speed: 20,
invert: false
},
useTransition:false // 防止iphone微信滑动卡顿
});
oScroll.on("scroll",function(pos){//监听滚动事件
//console.log(pos);
});
oScroll.on("pullingUp",function(){
//alert('已到最底部');
console.log('加载ajax数据');
oScroll.finishPullUp();//可以多次执行上拉刷新
});
oScroll.refresh();
</script>
</body>
</html>
这是better-scroll的cdn模式的演示代码，只要把官方文档里的属性、方法、事件写到上面代码的相应位置即可。 点击下载
better-scroll 是一款重点解决移动端（现已支持 PC 端）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。
由于目前最适合移动端开发的前端 mvvm 框架是 Vue，并且 better-scroll 可以很好的和 Vue 配合使用的，所以 demo 我都用 Vue 进行了重写。
应用场景：
1、横向滚动菜单
2、列表纵向滚动
3、上拉刷新
4、下拉刷新
5、Slide 组件
6、开屏引导
7、自由滚动
由于better-scroll的代码示例只有脚手架模式而且是基于vue的demo，如果想在cdn模式下使用官网没有提供demo，我把cdn模式下的代码示例写出来供大家参考。
<!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）
pullDownRefresh: {
threshold: 20,
stop: 0
},
//这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载
pullUpLoad: {
threshold: 10
},
mouseWheel: { // pc端同样能滑动
speed: 20,
invert: false
},
useTransition:false // 防止iphone微信滑动卡顿
});
oScroll.on("scroll",function(pos){//监听滚动事件
//console.log(pos);
});
oScroll.on("pullingUp",function(){
//alert('已到最底部');
console.log('加载ajax数据');
oScroll.finishPullUp();//可以多次执行上拉刷新
});
oScroll.refresh();
</script>
</body>
</html>
这是better-scroll的cdn模式的演示代码，只要把官方文档里的属性、方法、事件写到上面代码的相应位置即可。 点击下载