better-scroll的上拉加载和下拉刷新

时间 2019-12-05

标签 better scroll 加载下拉刷新繁體版

原文原文链接

写一个better-scroll的上拉刷新，和下拉加载的小demo吧，小例子大用处，但愿可以帮到有须要的小伙伴：html

安装：

1.better-scroll 托管在 Npm 上，执行以下命令安装：git

npm install better-scroll --savegithub

项目中引入：import BScroll from 'better-scroll'ajax

2.script 加载npm

better-scroll 也支持直接用 script 加载的方式，加载后会在 window 上挂载一个 BScroll 的对象。微信

用：https://unpkg.com/better-scroll/dist/bscroll.min.js 这个地址。iphone

使用:

var scroll = new BScroll ( element,options)异步

element: 滑动区域的父节点ui

options: better-scroll的一些设置参数，具体查看这里，讲的很是详细spa

注意的地方：

滑动区域的父盒子高度必定要小于滑动区域，否则没法滑动！！！

<!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>