vue 上拉刷新（scroll、IntersectionObserver）

 

注意：this.$publicFunction.debounce(this.sayDebounce, 800) （如果没有封装防抖函数---了解防抖点击）可以直接改为  this.sayDebounce() 

 

1.scroll实现

你要先了解clientHeight、scrollTop

<style>
.testList {
    height: 100px;
    margin: 10px 0;
    background-color: red;
}
#test1 {
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: auto;
}
</style>
<template>
    <div>
        <div id="test1"  ref="testRef" @scroll="handleScroll">
            <div ref="testListRef" class="testList" v-for="(item) in testArr" :key="item">
                内容................{{item}}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            testArr: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
            clientHeight: 0,
            listHeight: 0
        }
    },
    // 页面初始化 created activated
    created() {
    },
    // 计算属性顾名思义就是通过其他变量计算得来的另一个属性
    computed: {
    },
    // 侦听一个特定的值，当该值变化时执行特定的函数
    watch: {
    },
    // 页面加载完
    mounted() {
    },
    // 页面离开 destroyed deactivated
    destroyed() {
    },
    methods: {
        handleScroll(e) {
            console.log('-----handleScroll----')
            this.$publicFunction.debounce(this.sayDebounce, 800)
        },
        sayDebounce() {
            this.clientHeight = this.$refs.testRef.clientHeight

            this.listHeight = (this.$refs.testListRef[0].clientHeight)*this.$refs.testListRef.length
            
    
            console.log('手机屏幕高度：' + this.clientHeight)
            console.log('滚动高度：' + this.$refs.testRef.scrollTop)

            console.log('当前滚动+屏幕高度：' + parseInt(this.clientHeight + this.$refs.testRef.scrollTop))

            console.log('列表高度：' + this.listHeight)

            if (this.clientHeight + this.$refs.testRef.scrollTop >= this.listHeight) {
                console.log('到底了----显示加载')

                if (this.testArr.length > 50) {
                    console.log('-----没有更多数据了-----')
                    return 
                }
                let arr = []
                for(let i=this.testArr.length+1; i<this.testArr.length+10; i++) {
                    arr.push(i)
                }
                console.log(arr)
                let test = this.testArr.concat(arr)
                this.testArr = test
                console.log(this.testArr)
            }
        }
   
    }
}
</script>

2.IntersectionObserver实现

文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserverEntry

<style>

.view-list{
    width: 100%;
    height: 100vh;
    overflow-x: scroll;
    background-color: rgba(0, 0, 255, 0.25);
}
.item{
    height: 50px;
    border:1px gray solid;
    margin-bottom: 10px;
}
</style>
<template>
    <div>
        <div class="view-list">
            <div class="item" v-for="(item,index) in testArr" :key="index">
               内容................{{item}}
            </div>
            <div ref="loading">加载中</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            testArr:[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            io: null
        }
    },
    // 页面初始化 created activated
    created() {
    },
    // 计算属性顾名思义就是通过其他变量计算得来的另一个属性
    computed: {
    },
    // 侦听一个特定的值，当该值变化时执行特定的函数
    watch: {
    },
    // 页面加载完
    mounted() {
        // 初始化观察对象
        this.io = new IntersectionObserver( this.handleScroll, {});
        // 获取被监听元素
        let viewList = this.$refs.loading;
        // 绑定
        this.io.observe(viewList);
    },
    // 页面离开 destroyed deactivated
    destroyed() {
        console.log("---关闭观察器---")
        // 关闭观察器
        this.io.disconnect()
    },
    methods: {
        handleScroll(status) {
            console.log('-----handleScroll----')
            this.$publicFunction.debounce(this.sayDebounce, 800, status)
        },
        // 触发监听回调
        sayDebounce(status){
            console.log('防抖成功')
            status = status[0];
            let isShow = status.isIntersecting;
            if(isShow){
                console.log("加载中 ---- ");
                let arr = []
                for(let i=this.testArr.length+1; i<this.testArr.length+10; i++) {
                    arr.push(i)
                }
                console.log(arr)
                let test = this.testArr.concat(arr)
                this.testArr = test
                console.log(this.testArr)
            }
        },
    }
}
</script>