【vue】实现页面滚动加载

页面内容太多会导致加载速度过慢，这时可考虑使用滚动加载即还没有出现在可视范围内的内容块先不加载，出现后再加载
基本思路就是判断元素是否出现在浏览器的可视区域，出现了就加载请求接口加载内容。但是要求内容块有最小高度。
具体代码如下


<template><div><divv-loading.fullscreen.lock="loading"class="page"id="tablist"@scroll="listScroll"><divclass="item"v-for="(item, i) in testData":key="i":class="i % 2 == 0 ? 'gray' : 'white'":id="item.id">{{ item.name }}</div></div></div>
</template><script>
export default {name: "ScrollLoadingSample",props: {},data() {return {flag: true, // 开关loading: false, // loading加载testData: [], // 列表数据targetIndex: 0,nextId: "",};},mounted() {this.initData();},methods: {initData() {this.testData = [{id: "test-1",name: "区块1",// 要加载的方法名function: "loadTest1",// 方法是否加载了isLoaded: false,},{id: "test-2",name: "区块2",function: "loadTest2",isLoaded: false,},{id: "test-3",name: "区块3",function: "loadTest3",isLoaded: false,},{id: "test-4",name: "区块4",function: "loadTest4",isLoaded: false,},{id: "test-5",name: "区块5",function: "loadTest5",isLoaded: false,},{id: "test-6",name: "区块6",function: "loadTest6",isLoaded: false,},];this.$nextTick(() => {this.loadPage();});},//判断元素是否在可视区域isElementInViewport(id) {let el = document.getElementById(id);//获取元素是否在可视区域let rect = el.getBoundingClientRect();return (rect.top + rect.height / 2 <=(window.innerHeight || document.documentElement.clientHeight) &&rect.bottom > 0);},// 初次加载页面时loadPage() {for (let i = 0; i < this.testData.length; i++) {if (this.isElementInViewport(this.testData[i]["id"])) {this.loadFunctionByName(this.testData[i]["function"]);this.testData[i]["isLoaded"] = true;} else {this.targetIndex = i;// 最开始没出现在页面上的idthis.nextId = this.testData[this.targetIndex]["id"];break;} }},// 页面滑动listScroll() {for (let i = this.targetIndex; i < this.testData.length; i++) {// 如果出现在页面上if (this.isElementInViewport(this.testData[i]["id"])) {// 如果方法没有加载if (!this.testData[i]["isLoaded"]) {this.loadFunctionByName(this.testData[i]["function"]);this.testData[i]["isLoaded"] = true;}} else {// 如果没有出现在页面上this.targetIndex = i;this.nextId = this.testData[this.targetIndex]["id"];break;}}},// 根据方法名加载loadFunctionByName(functionName) {switch (functionName) {case "loadTest1":this.loading = true;// 模拟延迟请求setTimeout(() => {console.log("加载区块1");this.loading = false;}, 1000);break;case "loadTest2":this.loading = true;// 模拟延迟请求setTimeout(() => {console.log("加载区块2");this.loading = false;}, 1000);break;case "loadTest3":this.loading = true;// 模拟延迟请求setTimeout(() => {console.log("加载区块3");this.loading = false;}, 1000);break;case "loadTest4":this.loading = true;// 模拟延迟请求setTimeout(() => {console.log("加载区块4");this.loading = false;}, 1000);break;case "loadTest5":this.loading = true;// 模拟延迟请求setTimeout(() => {console.log("加载区块5");this.loading = false;}, 1000);break;case "loadTest6":this.loading = true;// 模拟延迟请求setTimeout(() => {console.log("加载区块6");this.loading = false;}, 1000);break;}},},
};
</script><style scoped>
.page {width: 100vw;height: 100vh;overflow-y: auto;display: flex;flex-wrap: wrap;/* justify-content: center;align-items: center; */
}
.item {width: 100vw;height: 25vh;display: flex;justify-content: center;align-items: center;
}
.gray {background-color: #d5d1d1;
}
.white {background-color: white;
}
.loading {width: 80px;height: 100px;background: rgba(0, 0, 255, 0.664);display: inline-block;
}
</style>

需要注意 getBoundingClientRect()这个方法，正是通过这个方法获取元素位置，从而判断是否出现在可视区域

【vue】实现页面滚动加载相关推荐

【vue】用WOW.js+animate.css实现页面滚动加载元素动画
一.场景在很多的网站中,我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的,这样看起来页面更具有活力,增加用户体验.当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的 ...
Vue刷新页面重新加载
Vue刷新页面重新加载问题描述在加载同一路由页面的时候,vue的页面默认是不刷新的,需要重新加载数据解决方案修改App.vue 在路由视图上添加一个变量isRouterAlive判断显示实现重 ...
vue页面滚动加载、页面懒加载
需求:页面有一堆图表.需要滚动到图表时.再加载出来这个图表. 思路:没找到合适的插件.只能自己手撸一个.直接放到混入里就行.主要就是判断元素距离底部的距离和可视区域内容的高度进行对比即可 /*** 判 ...
Vue向下滚动加载更多数据-scroll-案例
vue-infinite-scroll 安装 npm install vue-infinite-scroll --save 尽管官方也推荐了几种载入方式,但"最vue"的方式肯定是 ...
页面滚动加载动画之WoW.js
https://www.delac.io/wow/官网 https://github.com/matthieua/WOW 下载地址当网页的向下滚动的时候,有些元素会产生细小的动画效果.然而直接用an ...
Angular\Vue解决页面数据加载时出现{{message}}闪烁的情况
vue 使用v-cloak <style type="text/css">[v-cloak] { display: none } </style> < ...
vue 滑动加载列表 php,通过原生vue添加滚动加载更多功能
这篇文章主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 vue中添加滚动加载更多,因为是单页面所以需要在 ...
前端vue里面点击加载更多_vue 原生添加滚动加载更多
vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱.我们在mounted建立滚动,destroyed销毁滚动. mounted () { window.addEven ...
Vue踩坑之旅（四）—— 自定义指令实现滚动加载
这几天在做商城首页的商品列表,商品卡片的数量很多,如果一次性加载那么多,加载较慢,而且用户体验不好.所以使用鼠标无限滚动加载效果更好. 实现滚动加载的方式有很多,有现成的组件 InfiniteScro ...

【vue】实现页面滚动加载

【vue】实现页面滚动加载相关推荐

最新文章

热门文章