better-scroll代替iscroll目前流行的滚动插件附Demo教程

文件大小:4.51MB下载:284次
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模式的演示代码,只要把官方文档里的属性、方法、事件写到上面代码的相应位置即可。 点击下载
收藏