vuejs如何實(shí)現(xiàn)上滑加載

vuejs如何實(shí)現(xiàn)上滑加載，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)建站10多年成都企業(yè)網(wǎng)站定制服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及高端網(wǎng)站定制服務(wù),成都企業(yè)網(wǎng)站定制及推廣,對(duì)成都戶外休閑椅等多個(gè)方面擁有多年的網(wǎng)站維護(hù)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。

vuejs實(shí)現(xiàn)上滑加載的方法：1、在Vue.js的鉤子函數(shù)created里初始化加載數(shù)據(jù)；2、聲明一個(gè)scroll事件監(jiān)聽(tīng)；3、當(dāng)滑動(dòng)到達(dá)屏幕底部就去后臺(tái)請(qǐng)求新的數(shù)據(jù)；4、聲明一個(gè)pageNum字段；5、將新數(shù)據(jù)儲(chǔ)存到數(shù)組中。

本文操作環(huán)境：windows7系統(tǒng)、Vue2.9.6版、DELL G3電腦。

vuejs怎么實(shí)現(xiàn)上滑加載？

vue.js實(shí)現(xiàn)上拉加載

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

vuejs如何實(shí)現(xiàn)上滑加載

原理：在Vue.js的鉤子函數(shù)created里初始化加載數(shù)據(jù)，在鉤子函數(shù)mounted中聲明一個(gè)scroll事件監(jiān)聽(tīng)，監(jiān)聽(tīng)屏幕的高度變化，一旦滑動(dòng)到達(dá)屏幕底部就去后臺(tái)請(qǐng)求新的數(shù)據(jù)，同時(shí)我們?cè)赿ata中聲明一個(gè)pageNum字段來(lái)記錄當(dāng)前加載到多少頁(yè),pageSize每頁(yè)顯示個(gè)數(shù)，pageNum當(dāng)前頁(yè)數(shù)，每去后臺(tái)請(qǐng)求一次我們將pageSize加一定個(gè)數(shù)，加載過(guò)后，將新的數(shù)據(jù)list到data中儲(chǔ)存數(shù)據(jù)的數(shù)組中。

代碼：

   created(){
            loading = showLoading('加載中…')//這是我引用的vant可以不寫(xiě)
            this.custid = localStorage.getItem('cust_id')
            //初始化加載數(shù)據(jù)
            this.methodsGetMessage(this.custid,this.pageNum,this.pageSize)
        },
        mounted(){
            //監(jiān)聽(tīng)如果頁(yè)面發(fā)生滾動(dòng)時(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('暫無(wú)消息')
                        }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()
                    }
                })
            },
            //頁(yè)面滑到底部需要調(diào)用的方法
            handleScroll(){ //下面這部分兼容手機(jī)端和PC端
                var scrollTop = this.$refs.homeUl.scrollTop; //滾動(dòng)條的位置
                var windowHeitht = this.$refs.homeUl.clientHeight; //在頁(yè)面上返回內(nèi)容的可視高度
                var scrollHeight = this.$refs.homeUl.scrollHeight; //返回整個(gè)元素的高度（包括帶滾動(dòng)條的隱蔽的地方）
                //是否滾動(dòng)到底部的判斷
                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)聽(tīng)，需加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.定義名，來(lái)實(shí)現(xiàn)你想要的功能。
4.使用全屏的滾動(dòng)條位置判斷會(huì)出錯(cuò)，所以，我是消息列表是一個(gè)ul，獲取消息列表ul的滾動(dòng)條可是高度，整個(gè)元素高度，來(lái)判斷的，判斷是否到達(dá)底部給滾動(dòng)條的位置使用Math.round()向上取整，因?yàn)橛辛泓c(diǎn)幾的誤差，就醬。。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。

網(wǎng)頁(yè)題目：vuejs如何實(shí)現(xiàn)上滑加載
轉(zhuǎn)載來(lái)于：http://muchs.cn/article4/ijdgie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、響應(yīng)式網(wǎng)站、面包屑導(dǎo)航、網(wǎng)站設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)、定制網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容