better-scroll下拉刷新上拉加载代码

代码语言:html

所属分类:加载滚动

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</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() {
                let wrapper = document.querySelector('.wrapper');

                var bScroll = new BScroll(wrapper, {
                    scrollbar: true,
                    fade: true,
                    pullDownRefresh: {
                        threshold: 90,
                        stop: 40
                    },
                    pullUpLoad: {
                        threshold: 90,
                        stop: 40
                    }
                });

                bScroll.on('pullingDown', function () {
                    console.log('我想刷新数据');
                    // 干点啥
                    bScroll.finishPullDown();

                })
                bScroll.on('pullingUp', function () {
                    console.log('我想加载数据');
                    // 干点啥
                    bScroll.finishPullUp();

                })


            });
        });
    </script>
    <style>
        /*设置高度是为了让content高度大于wrapper高度,否则无滚动效果*/
        .wrapper {
            height: 500px;
            overflow: hidden;
            background: #eee;
        }
        .wrapper .list-content .list-item {
            height: 60px;
            line-height: 60px;
            font-size: 18px;
            padding-left: 20px;
            border-bottom: 1px solid #e5e5e5;
        }
        ul{
            list-style:none;
        }
        .wrapper .list-content {
            position: relative;
            z-index: 10;
            background: #ff.........完整代码请登录后点击上方下载按钮下载查看

网友评论0