How to implement sliding loading in vuejs

Vuejs method to implement sliding loading: 1. Initialize the loading of data in the hook function created of Vue.js; 2. Declare a scroll event listener; 3. When the sliding reaches the bottom of the screen, go to the background to request new data Data; 4. Declare a pageNum field; 5. Store new data in the array.

The operating environment of this article: Windows 7 system, Vue version 2.9.6, DELL G3 computer.

How to implement sliding loading in vuejs?

vue.js implements pull-up loading

Since mine is developed purely with vue, I have made some optimizations and modifications. Let’s take a look first. Next effect

Principle: Initialize loading data in the hook function created of Vue.js, declare a scroll event listener in the hook function mounted, and monitor the height of the screen Change, once the slide reaches the bottom of the screen, we go to the background to request new data. At the same time, we declare a pageNum field in the data to record how many pages are currently loaded, pageSize displays the number of pages per page, and pageNum is the current page number. Every time we go to the background to request Increase pageSize by a certain number, and after loading, list the new data into the array storing data in 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. To monitor addEventListener in the hook function mounted, you need to add this.$nextTick(() => {}), which delays the callback. It will be executed after the next DOM update cycle.
2. Use addEventListener('scroll', this.handleScroll, true) in vue. The third digit in the method must be true, otherwise it will not take effect.
3. To obtain element focus in vue, add a ref='definition name' in the tag, and then define the name in the method

this.$refs. to achieve the function you want.
4. It will be wrong to use the full-screen scroll bar position judgment. Therefore, my message list is a ul. The scroll bar of the message list ul can be judged by the height, the height of the entire element, and whether it reaches the bottom to the scroll bar. Use Math.round() to round up the position. Because there is an error of a few tenths, it's okay. .

Finally: If anything goes wrong, remember to come to me! !

Recommended study: "vue tutorial"

The above is the detailed content of How to implement sliding loading in vuejs. For more information, please follow other related articles on the PHP Chinese website!