vuejs怎麼實作上滑載入

vuejs實作上滑載入的方法：1、在Vue.js的鉤子函數created裡初始化載入資料；2、宣告一個scroll事件監聽；3、當滑動到達畫面底部就去後台請求新的資料；4、宣告一個pageNum欄位；5、將新資料儲存到陣列中。

本文操作環境：windows7系統、Vue2.9.6版、DELL G3電腦。

vuejs怎麼實作上滑載入？

vue.js實作上拉載入

#由於我的是純vue開發的，所以做了一些最佳化和修改，先看下效果

原理：在Vue.js的鉤子函數created裡初始化載入數據，在鉤子函數mounted中宣告scroll事件監聽，監聽螢幕的高度變化，一旦滑動到達屏幕底部就去後台請求新的數據，同時我們在data中聲明一個pageNum字段來記錄當前加載到多少頁,pageSize每頁顯示個數，pageNum當前頁數，每去後台請求一次我們將pageSize加上一定個數，載入過後，將新的資料list到data中儲存資料的陣列中。

#程式碼：

   created(){
            loading = showLoading('加载中…')//这是我引用的vant可以不写
            this.custid = localStorage.getItem('cust_id')
            //初始化加载数据
            this.methodsGetMessage(this.custid,this.pageNum,this.pageSize)
        },
        mounted(){
            //监听如果页面发生滚动时
            this.$nextTick(() => {
                this.$refs.homeUl.addEventListener('scroll',this.handleScroll,true);
            })
        },
        methods:{
            //初始化加载数据
            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()
                    }
                })
            },
            //页面滑到底部需要调用的方法
            handleScroll(){ //下面这部分兼容手机端和PC端
                var scrollTop = this.$refs.homeUl.scrollTop; //滚动条的位置
                var windowHeitht = this.$refs.homeUl.clientHeight; //在页面上返回内容的可视高度
                var scrollHeight = this.$refs.homeUl.scrollHeight; //返回整个元素的高度（包括带滚动条的隐蔽的地方）
                //是否滚动到底部的判断
                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.在鉤子函數mounted中進行addEventListener監聽，需加this.$nextTick(() => {}）,他是將回呼延遲到下次DOM 更新循環之後執行。
2.在vue裡使用addEventListener('scroll',this.handleScroll,true)，方法裡的第三位必須加true,否則不生效。
3.vue中取得元素焦點是在標籤中加入一個ref='定義名'，然後在方法裡

this.$refs.定義名，來實現你想要的功能。
4.使用全螢幕的滾動條位置判斷會出錯，所以，我是訊息列表是一個ul，獲取訊息列表ul的滾動條可是高度，整個元素高度，來判斷的，判斷是否到達底部給滾動條的位置使用Math.round()向上取整，因為有零點幾的誤差，就醬。 。

最後：如果有什麼出錯記得來找我喔！ ！

推薦學習：《vue教學》

以上是vuejs怎麼實作上滑載入的詳細內容。更多資訊請關注PHP中文網其他相關文章！