由于我的是純vue開發(fā)的古程，所以做了些優(yōu)化和修改户盯，先看下效果

上拉加載.gif

      created(){
            loading = showLoading('加載中…')//這是我引用的vant可以不寫
            this.custid = localStorage.getItem('cust_id')
            //初始化加載數(shù)據(jù)
            this.methodsGetMessage(this.custid,this.pageNum,this.pageSize)
        },
        mounted(){
            //監(jiān)聽如果頁面發(fā)生滾動時(shí)
            this.$nextTick(() => {
                this.$refs.homeUl.addEventListener('scroll',this.handleScroll,true);
            })
        },
        methods:{
            //初始化加載數(shù)據(jù)
            methodsGetMessage(custid,pageNum,pageSize){
                loading = showLoading('加載中…')
                getMessage(custid,pageNum,pageSize).then((res)=>{
                    loading.clear()
                    if(res.code == 200){
                        this.pagNum += 1;
                        if(res.data.list == []){
                            this.list = []
                            showToast('暫無消息')
                        }else{
                            this.totalnum = Math.ceil(res.data.total/8)
                            var list=res.data.list
                            for(var i in list){
                                list[i].addtime = this.dateToString(list[i].addtime)
                            }
                            this.list.push(list)
                            this.listLength = list.length
                        }
                        loading.clear()
                        //隱藏
                    }else{
                        showToast('獲取消息失敗')
                        loading.clear()
                    }
                })
            },
            //頁面滑到底部需要調(diào)用的方法
            handleScroll(){ //下面這部分兼容手機(jī)端和PC端
                var scrollTop = this.$refs.homeUl.scrollTop; //滾動條的位置
                var windowHeitht = this.$refs.homeUl.clientHeight; //在頁面上返回內(nèi)容的可視高度
                var scrollHeight = this.$refs.homeUl.scrollHeight; //返回整個(gè)元素的高度（包括帶滾動條的隱蔽的地方）
                //是否滾動到底部的判斷
                if(Math.round(scrollTop) + windowHeitht == scrollHeight){
                    console.log(this.pagNum+'=='+this.totalnum)
                    if(this.pagNum <= this.totalnum){
                        this.methodsGetMessage(this.custid,this.pageNum,this.pageSize)
                    }else{
                        this.notList = true
                        return;
                    }
                }
            },
  }

1.在鉤子函數(shù)mounted中進(jìn)行addEventListener監(jiān)聽，需加this.$nextTick(() => {}）,他是將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行班巩。
2.在vue里使用addEventListener('scroll',this.handleScroll,true)渣慕，方法里的第三位必須加true,否則不生效。
3.vue中獲取元素焦點(diǎn)是在標(biāo)簽中添加一個(gè)ref='定義名'抱慌，然后在方法里

this.$refs.定義名逊桦，來實(shí)現(xiàn)你想要的功能。
4.使用全屏的滾動條位置判斷會出錯(cuò)抑进，所以强经，我是消息列表是一個(gè)ul，獲取消息列表ul的滾動條可是高度寺渗，整個(gè)元素高度匿情，來判斷的，判斷是否到達(dá)底部給滾動條的位置使用Math.round()向上取整信殊，因?yàn)橛辛泓c(diǎn)幾的誤差炬称，就醬。涡拘。

最后：如果有什么出錯(cuò)記得來找我哦Ｉ罡　靡砌！