vuejs怎么实现上滑加载插图

本文操作环境:windows7系统、Vue2.9.6版、DELL G3电脑。

vuejs怎么实现上滑加载?

vue.js实现上拉加载

由于我的是纯vue开发的,所以做了些优化和修改,先看下效果

8afb3e5033f2d65b90845e1fe83d8dd.png

原理:在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怎么实现上滑加载的详细内容,更多请关注亿码酷站其它相关文章!


<!–亿码酷站直播班–>vuejs怎么实现上滑加载
—–文章转载自PHP中文网如有侵权请联系ymkuzhan@126.com删除

云服务器推荐