vue实现滚动加载

//template:
<template>
<ul class="Prolist">
                <li v-for="(item,i) in commrecommend" :key="i">
                    <router-link :to="'/Detaiils/'+item.commId" class="">
                        <div class="Proimg"> <a href="#"><img :src="tempHttpserver+item.imgPath"  width="180" height="180" alt=""/></a> </div>
                        <div class="ProTxt"> <a href="#">
                        <h2>{{item.commName}}</h2>
                        <p>{{item.commExplain}}</p>
                        <span>{{item.salesAmt}}</span></a></div>
                    </router-link> 
                </li>
                <div class="clearfix" style="clear:both"></div>
</ul>
</template>

//js
<script>


export default {
    data(){
        return{
            categoryId:"",
            commrecommend:[],//商品类目下得商品
            number:0,
            tempHttpserver:'',
            page:1,
            onFetching:false,
        }
    },
    mounted(){
        let _this = this;
            // 设置一个开关来避免重负请求数据
        let sw = true;
        //this.categoryId=this.$route.params.id;
        _this.categoryId=_this.$route.params.id;
        _this.getData(_this.$route.params.id);
        _this.tempHttpserver=tempHttpserver;

        
        document.addEventListener('scroll',this.scrollLoad)
        
    
    
    },
    watch:{
        $route(to){ 
            
             this.categoryId=this.$route.params.id;
             this.page=1;
             this.commrecommend=[];
             //console.log(this.categoryId1)
             this.getData(this.$route.params.id);
        }
    },
    components:{
        PullTo
    },
    methods:{

    
        getData(categoryId1){
            let _this = this; 
            //let categoryId1=this.$route.params.id
            _this.axios.post(findComm,{
                categoryId:categoryId1,
                page:_this.page,
                limit:5
            })
            .then((result) => {
                if (result.data.code="000000") {
                    var data=result.data.data.listComm;
                    //console.log(data);
                    //this.commrecommend=data;
                    _this.commrecommend.push(...data);
                   // _this.page++;
                    sw = true;
                } 
            }).catch((err) => {
                
            });

        },

        scrollLoad(){
            let scrollHeight= document.documentElement.scrollHeight || document.body.scrollHeight; //document的滚动高度
            let nowScotop = document.documentElement.clientHeight || document.body.clientHeight;  //可视区高度
            let wheight= document.documentElement.scrollTop || document.body.scrollTop; //已滚动高度

                
                if (this.onFetching) {
                        // do nothing
                } else {
                    if (nowScotop >= scrollHeight - wheight-5 ) {
                    this.onFetching = true
                    setTimeout(() => {
                        
                        this.page+=1
                        this.getData(this.categoryId) //加载列表的请求方法
                        this.onFetching = false
                    }, 500)
                    }
                }
        }

    }
}


</script>