页面滚屏触底加载数据如何实现？

请听小帅慢慢道来！！！

首先，想要页面滚屏触底加载数据就要了解如何滚屏触底。有一个具体公式可以算出来。

可视区的高度：这个高度是你可以看的见的区域  我们可以这样获取：

    // 可见区的高度
        let clientHeight = document.documentElement.clientHeight

滚动的高度：

   // 滚动的高度
        let scrollTop = document.documentElement.scrollTop

整个文档的高度：

     // 整个文档的高度
        let scrollHeight = document.documentElement.scrollHeight

当可视区的高度加上滚动的高度等于整个文档的高度时它就触底啦

   if (scrollTop + clientHeight == scrollHeight) {
            console.log('触底啦');
        }

就当然有的电脑上边会返回小数，不用怕  加个1像素  parseInt转一下整数大于等于是触发就可以了

好的，上边我们知道了如何滚屏触底，那么我们就来实现一下滚屏触底加载数据

<script>
import ListItem from './li.vue'
export default {
    name: 'MyVueHome',
    components: {
        ListItem,
    },
    data() {
        return {
            // 定义一个空数组
            arr: [],
            params: {
                cateid: 3,
                page: 1,
                size: 4,
                type: 1
            },
            tag: true
        };
    },

    mounted() {
        this.getlist()
        addEventListener('scroll', this.getscroll)
    },

    methods: {
        async getlist() {
            // 发送网络请求
            await this.$http({
                
                url: 'api/getgoodlist',
                // 接口数据
                params: this.params
            }).then(res => {
                console.log(res);
                // 关门  触底就不再发送网络请求
                if (res.data.list.goodData < 4) {
                    this.tag = false
                }
                // 如果原数组中没有数据就停止
                if (!res.data.list.goodData) return

                // 赋值
                this.arr = [...this.arr, ...res.data.list.goodData]

            })
        },
        getscroll() {
            // 整个文档的高度
            let scrollHeight = document.documentElement.scrollHeight
            // 可见区的高度
            let clientHeight = document.documentElement.clientHeight
            // 滚动的高度
            let scrollTop = document.documentElement.scrollTop
            if (scrollTop + clientHeight >= scrollHeight) {
                this.params.page++

            }
        }
    },
    watch: {
        params: {
            deep: true,
            handler() {
                if (!this.tag) return;
                this.getlist()
            }
        }
    }

};
</script>

页面中的网络请求不用管，这是小帅自己封装的代理。我们来触底加载数据，在data中定义一个变量页码数page默认为一  触底之后就++，这个时候有人就说了  这样不行，是的  不要着急慢慢来，下边我们将每一次请求到的数据拼接一下，小帅这里用的展开运算符拼接的，你也可以用concat,方法很多种，喜欢那种用那种就好，拼接之后我们在mounted中监听一下触底加载的方法  addEventListener('scroll', this.getscroll)，在watch里边监听页面数据的变化，这时候就可以加载数据了，但是会有报错，所以还需要判断数组为空时return,或者你在接收到数据的时候在后边加一个||[ ]。但是这时候还会有一个问题，就是你每次触底都会发送网络请求，这样很不好，所以我在data中定义了一个变量赋值为true,在下获取到数据的那里判断下，当接收的数据小于每页条数时，就为false，当为false时就不会再发送网络请求。