vue-seamless-scroll数据量少时，暂停滚动，继续滚动

需求内容

大屏项目：指定dom元素内，如果子元素内容过多，超出父元素的最高高度，可以发生自动滚动；如果子元素内容没有超出父元素的最高高度，不可以发生自动滚动。

疑惑点：
.

实现方案

获取数据后并渲染到dom后，查看最后一个子元素是否在父元素的可视范围内(通过最后一个子元素offsetTop和父元素的clientHeight比较)，如果在就禁止vue-seamless-scroll复制数据和自动滚动行为，反之则允许。

vueSeamless 没有在官方文档里提到autoPlay属性，虽然它可以禁止自动滚动的行为。

代码逻辑

<vueSeamless :data="copyData" ref="vueSeamlessRef" class="scroll-list-seamless" :class-option="vueSeamlessOptions"><ul class="data-list"><li v-for="item in dataList" :key="item.count"><p v-text="item.name"></p><p v-text="item.count"></p></li></ul></vueSeamless><script>
data () {return {dataList: [],copyData: [],vueSeamlessOptions: null}
}
methods: {this.dataList = xxxx// 获取数据后，等待实际渲染dom后判断是否滚动this.$nextTick(() => {const scrollListDom = document.querySelector('.scroll-list-seamless')if (scrollListDom) {const scrollListDomLast = scrollListDom.querySelectorAll('li')[scrollListDom.querySelectorAll('li').length - 1]this.vueSeamlessOptions= {limitMoveNum: 20,step: .5,// autoPlay为false则不自动滚动，反之则开发自动滚动autoPlay: scrollListDomLast .offsetTop > scrollListDom .clientHeight}if (this.vueSeamlessOptions.autoPlay) {//vueSeamless 组件的data属性如果有值，则会自动复制一分并渲染//所以如果需要自动滚动，才需要赋值；反之则不需要this.copyData= this.dataList// 手动调用组件内方法，开始自动滚动this.$refs.vueSeamlessRef._startMove()}}})
}
</script><style>
.scroll-list-seamless {height: 400px;overflow: hidden;
}
</style>

vue-seamless-scroll数据量少时，暂停滚动，继续滚动相关推荐

vue+cesium cesium数据量太大导致浏览器卡顿解决办法
vue+cesium cesium数据量太大导致浏览器卡顿解决办法解决方案 : 不要把任何的cesium对象放在data中监听,因为在data中的变量 , vue会劫持数据 , 导致迟缓. 解 ...
vue+cesium cesium数据量太大导致浏览器卡顿解决办法
如题博主在开发过程中遇到了问题就是当数据量过大时浏览器特别卡情景: 每秒实时渲染数据效果:当前数据没有渲染完就开始渲染下一秒的数据了如何将巨大的数据在一秒内快速渲染到页面上呢? 解决方案 ...
vue后台获取数据量确定渲染轮播图的页量
轮播图每页展示6条数据,数据量不确定.轮播图页数要随着数据量的大小来确定贴代码: <el-carousel trigger="click" :autoplay='false ...
vue el-select数据量太大，导致浏览器崩溃解决办法
下拉数据量太大,浏览器单线程渲染时间较长,会导致浏览器崩溃.为了解决这一问题,可以采用懒加载形式,完美解决 <el-col :span="24"><el-form ...
elasticsearch scroll 一页最大数据量_elasticsearch 百亿级数据检索案例与原理
一.前言数据平台已迭代三个版本,从头开始遇到很多常见的难题,终于有片段时间整理一些已完善的文档,在此分享以供所需朋友的实现参考,少走些弯路,在此篇幅中偏重于ES的优化,关于HBase,Hadoop ...
vue渲染大量数据如何优化_大数据量场景下的Vue性能优化
性能优化最常见的落脚点是在网络和dom上,但是在大数据量的场景下,由于Vue本身的特性,可能会造成js运行层面的性能问题,这篇文章讨论的就是针对这一部分的性能优化方案. 模拟一个大数据量的场景 // ...
vue 页面卡顿(数据量大)
碰到个离谱的功能要循环好多遍然后在赋值本来数据量就大然后还循环就造成了页面特别卡顿分页或删除功能点一下要好几秒才反应过来差一点的电脑浏览器直接崩溃 so 我Google了好多方法 ...
一行代码解决vue数据量大卡顿问题
最近遇到一个需求,需要在地图上显示某地区的路网线路,结果后端直接返回了3w多条数据每条线路下坐标点接近100个这四舍五入就是300w的数据啊. 而且还不能分层级显示,只能一次性显示全部打点,没办法 ...
Vue渲染数据量过大，页面渲染卡
方案: 减少数据,减少demo节点,虚拟列表我在处理的使用使用了两个方案,一个是减少demo节点(组件化)拆分:虚拟列表我在进行排查问题的时候发现问题的所在是因为页面html有1800多行而且数据 ...

vue-seamless-scroll数据量少时，暂停滚动，继续滚动

需求内容

实现方案

代码逻辑

vue-seamless-scroll数据量少时，暂停滚动，继续滚动相关推荐

最新文章

热门文章