Comment implémenter le chargement glissant dans vuejs

Méthode Vuejs pour implémenter le chargement par glissement : 1. Initialisez le chargement des données dans la fonction hook créée de Vue.js ; 2. Déclarez un écouteur d'événement de défilement 3. Lorsque le glissement atteint le bas de l'écran, passez en arrière-plan ; pour demander de nouvelles données ; 4. Déclarez un champ pageNum ; 5. Stockez les nouvelles données dans le tableau.

L'environnement d'exploitation de cet article : système Windows 7, Vue version 2.9.6, ordinateur DELL G3.

Comment implémenter le chargement glissant dans vuejs ?

vue.js implémente le chargement pull-up

Étant donné que le mien est développé uniquement avec vue, j'ai fait quelques optimisations et modifications. Jetons d'abord un coup d'œil à l'effet

Principe : Hooks in. Vue.js Initialisez le chargement des données dans la fonction créée. Déclarez un écouteur d'événement de défilement dans la fonction hook montée pour surveiller le changement de hauteur de l'écran. Une fois que la diapositive atteint le bas de l'écran, elle passera en arrière-plan pour demander. nouvelles données. En même temps, nous déclarons un champ pageNum dans les données pour enregistrer le nombre de pages actuel, pageSize affiche le nombre de pages par page et pageNum est le numéro de page actuel. arrière-plan à demander, nous augmentons pageSize d'un certain nombre. Après le chargement, les nouvelles données sont répertoriées dans le tableau stockant les données dans data.

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. Pour surveiller addEventListener dans la fonction hook montée, vous devez ajouter this.$nextTick(() => {}), ce qui retarde le rappel jusqu'au prochain cycle de mise à jour du DOM.
2. Utilisez addEventListener('scroll', this.handleScroll, true) dans vue. Le troisième chiffre de la méthode doit ajouter true, sinon cela ne prendra pas effet.
3. Pour obtenir le focus de l'élément dans vue, ajoutez un ref='definition name' dans la balise, puis définissez le nom dans la méthode

this.$refs pour obtenir la fonction souhaitée.
4. Ce serait une erreur d'utiliser le jugement de position de la barre de défilement en plein écran. Par conséquent, ma liste de messages est un ul. La barre de défilement de la liste de messages ul peut être déterminée par la hauteur, la hauteur de l'élément entier. Déterminez s'il a atteint le bas de la position de la barre de défilement. Utilisez Math.round() pour arrondir, car il y a une erreur de quelques dixièmes, donc ce n'est pas grave. .

Enfin : si quelque chose ne va pas, n'oubliez pas de venir me voir ! !

Apprentissage recommandé : "tutoriel vue"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!