需求:多个模块在一个页面的数据看板,一次性请求多个接口,会造成页面卡断,有的接口运行缓慢,甚至出现canceled的情况
解决思路:前端进行接口滚动,自定义指令进行接口懒加载(模仿懒加载图片),滚动页面,当需要展示的页面出现在可见视图中,才进行接口加载
<div ref="businessTab" id="模块id1" v-lazy-load="lazyMethod"></div><div ref="businessTab" id="模块id2" v-lazy-load="lazyMethod"></div><div ref="businessTab" id="模块id3" v-lazy-load="lazyMethod"></div>.....import Vue from 'vue'Vue.directive("lazyLoad", {bind: function(el, binding,vnode) {let lazyImageObserver = new IntersectionObserver((entries, observer) => {entries.forEach((entry, index) => {let lazyImage = entry.target;// 相交率,默认是相对于浏览器视窗if (entry.isIntersecting){if (lazyImage.id==="模块id1") {// 在自定义指令中 用 vnode.context.方法名() 来 访问methods中的方法vnode.context.方法名字1()vnode.context.方法名字2()}else if (lazyImage.id==="模块id2") {vnode.context.方法名字1()vnode.context.方法名字2()} else if (lazyImage.id==="模块id3"){vnode.context.方法名字1()vnode.context.方法名字2()}}})})lazyImageObserver.observe(el);},});
lazyMethod() {},