基于vue2写的上拉加载

最新推荐文章于 2024-05-20 14:44:09 发布

赵海辛

最新推荐文章于 2024-05-20 14:44:09 发布

阅读量1w

点赞数 4

分类专栏： Vue2 文章标签： vue html5 web app es6 axios

本文链接：https://blog.csdn.net/zhaohaixin0418/article/details/71212475

版权

在项目中，由于结合swiper进行滑动切换与上拉加载功能，导致使用现成的UI框架出现各种bug。为解决这个问题，创建了一个自定义的Vue2上拉加载组件。该组件可复用，推荐存放在components/common目录下。在需要使用此功能的页面导入组件，并在页面的data和methods中设置相应属性和方法，即可实现灵活的上拉加载效果。

摘要由CSDN通过智能技术生成

因为我们项目中，还用了swiper。。。很多都是滑动切换的，但是又得上拉加载，所以导致，很多UI框架，我们用了，都有不同的bug出现，没办法，最后写了一个。代码如下（这个因为很多地方会用，所以建议放在components/common下面）：

<template>
    <div class="loadmore">
        <slot></slot>
        <slot name="bottom">
        </slot>
    </div>
</template>

<style>
    .loadmore{
        width:100%;
    }
</style>

<script>
    export default {
        name: 'loadmore',
        props: {
            maxDistance: {
                type: Number,
                default: 0
            },
            autoFill: {
                type: Boolean,
                default: true
            },
            distanceIndex: {
                type: Number,
                default: 2
            },
            bottomPullText: {
                type: String,
                default: '上拉刷新'
            },
            bottomDropText: {
                type: String,
                default: '释放更新'
            },
            bottomLoadingText: {
                type: String,
                default: '加载中...'
            },
            bottomDistance: {
                type: Number,
                default: 70
            },
            bottomMethod: {
                type: Function
            },
            bottomAllLoaded: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
                // 最下面出现的div的位移
                translate: 0,
                // 选择滚动事件的监听对象
                scrollEventTarget: null,
                containerFilled: false,
                bottomText: '',
                // class类名
                bottomDropped: false,
                // 获取监听滚动元素的scrollTop
                bottomReached: false,
                // 滑动的方向   down---向下互动；up---向上滑动
                direction: '',
                startY: 0,
                startScrollTop: 0,
                // 实时的clientY位置
                currentY: 0,
                topStatus: '',
                //  上拉加载的状态    ''     pull: 上拉中
                bottomStatus: '',
            };
        },
        watch: {
  
            // 改变当前加载在状态
            bottomStatus(val) {
                this.$emit('bottom-status-change', val);
                switch (val) {
                    case 'pull'<