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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。