Shulou(Shulou.com)06/03 Report--

vuejs如何实现上滑加载，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

vuejs实现上滑加载的方法：1、在Vue.js的钩子函数created里初始化加载数据;2、声明一个scroll事件监听;3、当滑动到达屏幕底部就去后台请求新的数据;4、声明一个pageNum字段;5、将新数据储存到数组中。

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

vuejs怎么实现上滑加载？

vue.js实现上拉加载

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

原理：在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 {}）,他是将回调延迟到下次 DOM 更新循环之后执行。

2.在vue里使用addEventListener('scroll',this.handleScroll,true)，方法里的第三位必须加true,否则不生效。

3.vue中获取元素焦点是在标签中添加一个ref='定义名'，然后在方法里

this.$refs.定义名，来实现你想要的功能。

4.使用全屏的滚动条位置判断会出错，所以，我是消息列表是一个ul，获取消息列表ul的滚动条可是高度，整个元素高度，来判断的，判断是否到达底部给滚动条的位置使用Math.round()向上取整，因为有零点几的误差，就酱。。

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注行业资讯频道，感谢您对的支持。

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.