better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件-BFW插件库

better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件

better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。

使用方式：

第一步引入bfwone

第二步use插件

第三步配置参数

{
  click: true,  // 元素可触发点击事件
  scrollX: false,  // 横向可滑动，默认为false
  scrollY: true,  // 纵向可滑动，默认为true
  bounce: false,  // 当滚动超过边缘的时候无回弹动画
  preventDefaultException: {  // 设置局部某元素原生事件不被禁止（默认preventDefault为true）
    className: 【正则表达式】
  },
  snap: {  // 滑动切换的一些配置
    speed: 800,  // 滑动切换的速度
    easing: {  // 滑动切换的动画效果
      style: 'ease-in'
    },
    threshold: 0.5,  // 滑动切换到超过一半时切换到下一屏
    stepX: window.innerWidth,  // 横向切换距离为窗口宽度
    stepY: window.innerHeight  // 纵向切换距离为窗口高度
  }
}

示例代码1：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片滚动</title>
    <script id="bfwone" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["better-scroll"], function() {
                new BScroll('.wrapper', {
                    scrollX: true,
                    scrollY: false,
                    snap: {
                        // 滑动切换的一些配置
                        speed: 800, // 滑动切换的速度
                        easing: {
                            // 滑动切换的动画效果
                            style: 'ease-in'
                        },
                        threshold: 0.5, // 滑动切换到超过一半时切换到下一屏
                        stepX: 600, // 横向切换距离为轮播图宽度
                    }
                });
            });
        });
    </script>
    <style>
        .wrapper {
            width: 600px;
            height: 320px;
            overflow: hidden;
        }
        .content {
            margin: 0;
            padding: 0;
            width: 1800px;
            overflow: hidden;
        }
        .content li {
            float: left;
            width: 600px;
            list-style: none;
        }
        .content li img {
            display: block;
            width: 100%;
        }

    </style>
</head>
<body>
    <div class="wrapper">
        <ul class="content">
            <li><img src="http://repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90" /></li>
            <li><img src="http://repo.bfw.wiki/bfwrepo/image/5d653a6a2aea8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90" /></li>
            <li><img src="http://repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90" /></li>
        </ul>
    </div>
</body>
</html>

示例代码2

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>全屏滚动</title>
    <script id="bfwone" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["better-scroll"], function() {
                new BScroll('.wrapper', {
                    snap: {
                        // 滑块切换的一些配置
                        threshold: 0.5, // 滑动切换到超过一半时切换到下一屏
                        stepY: window.innerHeight  // 纵向切换距离为窗口高度
                    }
                });
            });
        });
    </script>
    <style>
        body {
            margin: 0;
        }
        .wrapper {
            height: 100vh;
            overflow: hidden;
        }
        .content {
            margin: 0;
            padding: 0;
        }
        .content li {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            list-style: none;
            font-size: 50px;
            font-weight: bold;
            color: #fff;
        }
        .content li:nth-child(1) {
            background: #f00;
        }
        .content li:nth-child(2) {
            background: #0f0;
        }
        .content li:nth-child(3) {
            background: #00f;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <ul class="content">
            <li>第一屏</li>
            <li>第二屏</li>
            <li>第三屏</li>
        </ul>
    </div>
</body>
</html>

示例代码3

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>多屏多向切换</title>
    <script id="bfwone" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["better-scroll"], function() {
                new BScroll('#app', {
                    scrollX: true,
                    bounce: false,
                    snap: {
                        threshold: 0.5,
                        stepX: window.innerWidth,
                        stepY: window.innerHeight
                    }
                });
            });
        });
    </script>
    <style>

        body {
            margin: 0;
        }
        body,
        #app {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }
        .container {
            display: grid;
            width: 300vw;
            height: 300vh;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
        }
        .section {
            height: 100vh;
            background: url("http://repo.bfw.wiki/bfwrepo/image/5d653b1fc8bc9.png") no-repeat center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <div id="app">
        <article class="container">
            <section class="section"></section>
            <section class="section"></section>
            <section class="section"></section>
            <section class="section"></section>
            <section class="section"></section>
            <section class="section"></section>
            <section class="section"></section>
            <section class="section"></section>
            <section class="section"></section>
        </article>
    </div>
</body>
</html>

官网：https://ustbhuangyi.github.io/better-scroll