better-sroll 下拉刷新，下拉加载vue.js参考代码

最新推荐文章于 2024-02-27 10:52:01 发布

自娱自乐22

最新推荐文章于 2024-02-27 10:52:01 发布

阅读量264

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/codipy/article/details/103612845

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<template>
    <div class="test">
        <div class="loading-top" v-show="topshow">
            <div class="weui-loadmore">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
            </div>
        </div>
        <div class="wrapper" ref="wrapper" :class="{'list-top': topshow}">
            <div class="content">
                <ul>
                    <li>11</li>
                    <li>22</li>
                    <li>33</li>
                    <li>44</li>
                    <li>55</li>
                    <li>66</li>
                    <li>77</li>
                    <li>88</li>
                    <li>99</li>
                </ul>
            </div>
        </div>

    </div>
</template>

<script>
import BSscroll from 'better-scroll';
export default {
    name: "TestContent",
    data() {
        return {
            topshow: false
        }
    },
    mounted() {
        this.$nextTick(() => {
            //$refs绑定元素
            if (!this.scroll) {
                this.scroll = new BSscroll(this.$refs.wrapper, {
                    //开启点击事件, 默认为fasle
                    click: true,
                    scrollY: true,
                    pullUpLoad: {
                        threshold: -30, // 当上拉距离超过30px时触发 pullingUp 事件
                    },
                    pullDownRefresh: {
                        threshold: 30, // 下拉距离超过30px触发pullingDown事件
                        stop: 20 // 回弹停留在距离顶部20px的位置
                    }

                })
                //上滑加载
                this.scroll.on('pullingUp', () => {
                    console.log('pullingUp');
                    this.scroll.finishPullUp(); // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则上拉事件只会执行一次

                })
                //下拉刷新
                this.scroll.on('pullingDown', () => {
                    console.log('pullingDown');
                    this.topshow = true;
                    setTimeout(() => {
                        this.topshow = false;
                    }, 2000);

                    this.scroll.finishPullDown(); // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则下拉事件只会执行一次
                });


            } else if (!this.$refs.wrapper) {
                return
            } else {
                this.scroll.refresh()
            }
        })
    }

};
</script>

<style lang="stylus" scoped>
.test
    clear: both
    .wrapper
        width: 100%
        position: absolute
        top: 45px
        bottom: 50px
        overflow: hidden
        z-index: 1
        li
            line-height: 70px
            text-align: center
            background: orange
            margin: 10px 0
.loading-top
    position: absolute
    top: 20px
    height: 20px
    width: 100%
.list-top
    top: 80px !important
</style>