函数节流
发现一个问题就是当浏览器到达底部时,会多次触发函数,为了解决这个问题,进行函数节流。
浏览器中某些计算和处理要比其他的昂贵很多。例如,DOM 操作比起非 DOM 交互需要更多的内存和 CPU 时间。连续尝试进行过多的 DOM相关操作可能会导致浏览器挂起,有时候甚至会崩溃。尤其在 IE 中使用 onresize 事件处理程序的时候容易发生,当调整浏览器大小的时候,该事件会连续触发。
在 onresize 事件处理程序内部如果尝试进行 DOM 操作,其高频率的更改可能会让浏览器崩溃。为了绕开这个问题,你可以使用定时器对该函数进行节流。
函数节流背后的基本思想是指,某些代码不可以在没有间断的情况连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器
在这个项目中,是这样的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| mounted(){ this.$refs.viewBox.addEventListener('scroll', this.throttle(this.setpage,200),false) }, methods:{ throttle(fn,delay,atleast){ /**函数节流方法 @param Function fn 延时调用函数 @param Number dalay 延迟多长时间 @param Number atleast 至少多长时间触发一次 @return Function 延迟执行的方法 */ let timer = null; let previous = null; return function () { var now = +new Date(); if ( !previous ) previous = now; if ( atleast && now - previous > atleast ) { fn(); // 重置上一次开始时间为本次结束时间 previous = now; clearTimeout(timer); } else { clearTimeout(timer); timer = setTimeout(function() { fn(); previous = null; }, delay); } } },
}
|
用vue来实现一个pc端滚动加载更多,没有使用UI框架,纯手工
实现思路:
1.判断浏览器滚动条是否到达底部,如果到达底部,则使用axios拉取数据
2.拉取成功后,更新数据
布局方式
这里采用了头尾固定和中间高度自适应的布局方式,中间内容块高度没有设置,所以滚动条是在div的内容区域的,并不是在页面上,然而中间内容区域出现一个滚动条不是很好看,所以可以调整一下滚动条样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
| /*html代码*/ <div id="dHead"></div> <div id="dBody"> <div class="mycontent"> </div> </div> <div id="dFoot"></div> /*css代码*/ #dHead { height:100px; width:100%; position:absolute; z-index:5; top:0; } #dBody { width:100%; overflow:auto; top:100px; //top position:absolute; z-index:10; bottom:100px; //bottom } #dFoot { height:100px; width:100%; position:absolute; z-index:200; bottom:0; } /*滚动条样式*/ /*定义滚动条高度及背景 宽高分别对应横竖滚动条的尺寸*/ ::webkit-scrollbar{ width:1px; /*宽高可调节,如果为0,则消失*/ height:1px; background-color:#eaeaea; } /*定义滚动条轨道,内阴影+圆角*/ ::webkit-scrollbar-track{ -webkit-box-shaow:inset 0 0 6px rgba(0,0,0,0.3) border-radius:10px; background-color:#f5f5f5; } /*定义滑块 内阴影+圆角*/ ::webkit-scrollbar-thumb{ border-radius:10px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3) background-color:#555; }
|
滚动条判断
是对元素的滚动监听,项目中是中间内容的最外层元素,这里碰到一个坑就是对中间滚动元素监听都无效,必须对中部内容块的最外层元素监听。需要获取到元素的dom节点,在vue组件里面使用的是原生js的监听事件。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
| /*html*/ <div id="dBody" ref='viewbox'> <div class="mycontent"> </div> /*vue*/ methods:{ setpage(){ if (this.nomore &&!this.loaded) return;//到达底部不再执行 if(this.$refs.viewBox.scrollTop+ this.$refs.viewBox.offsetHeight+20 >= this.$refs.viewBox.scrollHeight){ this.loadingTip=true axios.get('/api/v1/topics?tab='+this.tabName+'&page='(++this.page)+'&limit=10') .then( res=>{ let arr=res.data.data; if(arr.length===0){ //some tips this.loaded=false this.nomore=true//没有更多 return } // ES5的合并数组 // arr1.concat(arr2, arr3); // ES6的合并数组 //[...arr1, ...arr2, ...arr3] this.site=[...this.site,...arr] this.loadingTip=false } ) .catch(err=>{ console.log(err) }) } } }
|
拉取数据,加载loading
在拉取数据时,可能会有时间缓存,在等待时间里使用了一个loading图,转圈的圆环,css3写的简单转圈效果,一个画了270°的圆。使用了axios拉取数据,在回调函数中隐藏loading缓冲,因为已经拉取完成了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
| .loadingTip{ height:50px; line-height:50px; text-align:center; color:#666666; } .loadingTip::before{ content:''; width: 20px; height:20px; border-radius:100% 100% 100% 0; border: 1px solid red; display: inline-block; border-bottom: none; border-left:none; box-sizing: border-box; vertical-align:sub; -webkit-animation:loading 1s linear infinite; } @keyframes loading{ 0%{ transform:rotate(0deg) } 100%{ transform:rotate(360deg) } }
|