epmet-work-h5-chengyang/src/views/assistance/index.vue

<template>
    <div class='pages' ref="scroll">
        <div class="scroll-box" ref="scroll-content">
            <van-tabs :active="active" sticky>
                <van-tab title="待接单">
                    <card></card>
                </van-tab>
                <van-tab title="待处理">内容 2</van-tab>
                <van-tab title="已完成">内容 3</van-tab>
            </van-tabs>
        </div>
    </div>
</template>
<script>
import card from './card.vue'
import throttle from 'lodash/debounce'
import { getServiceList } from '@/api/service'
export default {
    data() {
        return {
            active: 0,
            clientHeight: false,
            scroll: null,
            pageNo: 1,
            pageSize: 10,
            list: [],
            total:0
        };
    },
    created() {
        this.getTableList()
    },
    mounted() {
        this.clientHeight = document.documentElement.clientHeight; //可视高度
        console.log(this.clientHeight);
        this.$nextTick(() => {
            this.scroll = this.$refs.scroll;
            this.scroll.addEventListener('scroll', this.bottomScroll); //监听底部加载  		
        })

    },
    methods: {
        //滚动加载
        bottomScroll: throttle(function () {
            let scrollTop = this.scroll.scrollTop; //滚动条距离顶部的高度
            let scrollHeight = this.scroll.scrollHeight; //滚动条的高度
            let clientHeight = this.scroll.clientHeight; //可视区域的高度
            if (scrollTop + clientHeight >= scrollHeight) {
                console.log('到底了');
                this.pageNo++;
                this.getTableList();
            }
        }, 500),
        getTableList(){
            getServiceList({
                pageNo: this.pageNo,
                pageSize: this.pageSize
            }).then(res => {
                console.log(res);
                this.total = res.total;
                this.list = this.list.concat(...this.list,...res.list);
            }).catch(err=>{

            })
        }
    },
    destroyed() {
        this.scroll.removeEventListener('scroll', this.bottomScroll);//移除滚动监听
    },
    components: { card },
    computed: {},
    watch: {}
}
</script>

<style lang='less' scoped></style>