So implementieren Sie gleitendes Laden in VueJS

Vuejs-Methode zum Implementieren des gleitenden Ladens: 1. Initialisieren Sie das Laden von Daten in der von Vue.js erstellten Hook-Funktion. 2. Deklarieren Sie einen Scroll-Ereignis-Listener. 3. Gehen Sie zum Hintergrund, wenn das Gleiten den unteren Rand des Bildschirms erreicht um neue Daten anzufordern; 4. Deklarieren Sie ein pageNum-Feld. 5. Speichern Sie neue Daten im Array.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Vue Version 2.9.6, DELL G3-Computer.

Wie implementiert man gleitendes Laden in Vuejs?

vue.js implementiert Pull-up-Loading

Da meins rein mit Vue entwickelt wurde, habe ich zunächst einige Optimierungen und Modifikationen vorgenommen

Prinzip: Hooks in Vue.js Initialisiert das Laden von Daten in der erstellten Hook-Funktion, um die Höhenänderung des Bildschirms zu überwachen. Sobald die Folie den unteren Rand des Bildschirms erreicht, wird sie zur Anforderung in den Hintergrund verschoben Gleichzeitig deklarieren wir ein pageNum-Feld in den Daten, um die Anzahl der Seiten pro Seite aufzuzeichnen, und pageNum ist die aktuelle Seitenzahl Im Hintergrund erhöhen wir die Seitengröße um eine bestimmte Zahl. Nach dem Laden werden die neuen Daten im Datenarray aufgelistet.

Code:

   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. Um addEventListener in der gemounteten Hook-Funktion zu überwachen, müssen Sie Folgendes hinzufügen: $nextTick(() => {}), wodurch der Rückruf bis zum nächsten DOM-Aktualisierungszyklus verzögert wird.
2. Verwenden Sie addEventListener('scroll', this.handleScroll, true) in vue. Die dritte Ziffer in der Methode muss true hinzufügen, sonst wird sie nicht wirksam.
3. Um den Elementfokus in vue zu erhalten, fügen Sie einen ref='definitionsnamen' in das Tag ein und definieren Sie dann den Namen in der Methode

this.$refs, um die gewünschte Funktion zu erreichen.
4. Es wäre falsch, die Position der Bildlaufleiste im Vollbildmodus zu verwenden Es wird beurteilt, ob es den unteren Rand der Bildlaufleistenposition erreicht. Verwenden Sie Math.round() zum Aufrunden, da ein Fehler von einigen Zehnteln vorliegt, also ist es in Ordnung. .

Abschließend: Wenn etwas schief geht, denken Sie daran, zu mir zu kommen! !

Empfohlenes Lernen: „vue-Tutorial“

Das obige ist der detaillierte Inhalt vonSo implementieren Sie gleitendes Laden in VueJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!