vue 滑动加载列表 php,通过原生vue添加滚动加载更多功能

这篇文章主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

vue中添加滚动加载更多，因为是单页面所以需要在跳出页面时候销毁滚动，要不会出现错乱。我们在mounted建立滚动，destroyed销毁滚动。

mounted () {

window.addEventListener('scroll', this.handleScroll)

destroyed () {

window.removeEventListener('scroll', this.handleScroll)

定义一个函数，在滚动到底部时候使滚动条距离顶部距离与可视区域高度之和等于滚动条总高度，在加载后如果列表长度为0时应该停止加载，要不会出现一直加载的情况

handleScroll () {

//变量scrollTop是滚动条滚动时，距离顶部的距离

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

//变量windowHeight是可视区的高度

var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;

//变量scrollHeight是滚动条的总高度

var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;

//滚动条到底部的条件

if(scrollTop+windowHeight==scrollHeight &&this.list.length !==0){

this.loadMore() // 加载的列表数据

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持谷谷点程序。

vue 滑动加载列表 php,通过原生vue添加滚动加载更多功能相关推荐

前端vue里面点击加载更多_vue 原生添加滚动加载更多
vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱.我们在mounted建立滚动,destroyed销毁滚动. mounted () { window.addEven ...
基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
html上div加滑轮,css如何实现给div添加滚动并隐藏滚动条
css 给div添加滚动并隐藏滚动条 ,具体代码如下所示: 在html中下面内容会单独滚动 1111111111111111 222222222222222 333333333333333 4444 ...
（仿头条APP项目）6.点击过的新闻列表文字变灰和下拉刷新与滚动加载新闻数据
文章目录一.点击过的新闻列表文字变灰效果图实现思路导入ormlite数据库类依赖利用ormlite创建数据库和表创建数据库类MyDbHelper 创建数据库中的新闻实体类NewInfo 页 ...
PC端滚动加载更多的实现方法
//滚动加载更多 var pullRefreshss = true; $(window).scroll(function () {/*当前滚动条到顶部的距离*/var top = $(document ...
小程序实现滚动加载（懒加载）
前言小程序是一项很受欢迎的技术,随着其能力的不断增强,越来越多的人开始使用小程序来完成各种任务.当我面面临一个页面有非常多的数据时,该如何处理呢,显然一次性全部加载完,会非常消耗性能的,为了解决这些 ...
微信 html自动加载js,微信小程序实现图片预加载组件
网页中的图片预加载图片预加载对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.我们知道在 Web 页面中实现图片的预加载 ...
Vue——创建待办事件列表
根据MDN网站学习记录笔记 Vue 实现待办事项列表一.主要vue文件梳理 App.vue ToDoForm.vue ToDoItem.vue ToDoItemEditForm.vue 二.Vue ...
vue滑动选择器(一键开启时间选择器)
vue滑动选择器(一键开启时间选择器) 一个vue的滑动选择器(移动端和PC端都能使用) 先来张效果图安装 npm install time_check_jiangji 引入 import Time ...

vue 滑动加载列表 php,通过原生vue添加滚动加载更多功能

vue 滑动加载列表 php,通过原生vue添加滚动加载更多功能相关推荐

最新文章

热门文章