智能网站建设维护,高端网站建设kgu,wordpress win8主题,wordpress 评论回复邮件通知实现效果如下#xff1a; 功能点#xff1a;
1. 当表格内容超出时#xff0c;自动滚动#xff0c;滚动到最后一条之后在从头滚动。
2. 表格中的数据会定时刷新#xff0c;刷新后数据更新。
3. 鼠标移入表格中#xff0c;停止滚动#xff1b;移出后#xff0c;继续滚…实现效果如下 功能点
1. 当表格内容超出时自动滚动滚动到最后一条之后在从头滚动。
2. 表格中的数据会定时刷新刷新后数据更新。
3. 鼠标移入表格中停止滚动移出后继续滚动。
4. 点击表格中的排序功能拉取后端数据从头滚动。
先说一说实现过程中遇到的大坑吧
坑1 vue-seamless-scroll依赖的使用
1. 安装并对应引入
yarn add vue-seamless-scroll
局部引入 import vueSeamlessScroll from vue-seamless-scroll;components: { vueSeamlessScroll },
2. 使用
用该组件包住要滚动的表格并将表格数据传进去 参数tableData是我的表格数据数组defineScroll是滚动的参数参考如下 代码
classOption() {return {step: 0.5, // 数值越大速度滚动越快limitMoveNum: 5, // 开始无缝滚动的数据量hoverStop: true, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction 2/3waitTime: 500, // 单步运动停止的时间(默认值1000ms)};},
3. 实际效果
表头也会跟着滚动要想表头不滚动很简单利用两个表格组件 a. 需要滚动的表格去掉表头用vueSeamlessScroll 组件包着 b. 将另一个表格放在vueSeamlessScroll 组件外边只显示表格标题。
除此之外这个组件有个缺陷数据更新的时候dom却不会更新。
如上图当数据量从17变为15时滚动的dom的高度依旧是17的高度。为了解决这个问题可以利用v-if的强制刷新。在数据有更新时先将updateFlag设为false,过100毫秒再设为true。 如此基本上能保证正常显示所有的数据。但强制刷新会使得滚动进度刷新从头开始滚。
看似很完美但是坑在业务场景了我们这边的数据刷新频率在10秒左右也就意味着在我们的业务场景中只会看到前几条数据因为每次数据更新都会从头滚动。
基于此我放弃了该依赖的使用。 坑2 使用scrollTop属性找不到表格的bodyWrapper
看了好多文章都说直接取用this.$refs.myTable.bodyWrapper搁我这就直接报错就找不着这个bodyWrapper。
实际实现步骤
主要实现逻辑使用的是操作表格体的滚动条也就是坑2中找不到的bodyWrapper。
1. 找到要操作的dom节点 具体操作如上图找到表格体的外层dom节点有滚动条属性。然后点击右键将该节点显示在控制台上修改该节点的scrollTop值发现表格内容上移了说明我们找对了节点。
接下来就是在代码中找到该节点给表格加一个reftableData然后你可以打印一下this.$refs.tableData手动找一下刚刚在控制台操作的那个元素我的是this.$refs.tableData.$refs.bodyWrapperScrollbar.$refs.wrap然后操作一下该元素的scrollTop属性看是否能操作表格的滚动条这里有一个坑直接操作可能不会生效需要一个定时器改动。
2. 控制该节点的scrollTop属性
整体代码如下 封装了方法之后在created或mounted调用该方法即可。
其中定时器中(1000 / 60) * 3是定时执行的时间控制滚动的快慢可以自定义时间。
除此之外还有个需求就是鼠标移入表格区暂停移动鼠标移出表格区继续移动。
封装一个停止移动的方法同时给表格增加方法鼠标移入停止移动出来之后继续移动。 除此之外还有一个需求是手动点击某一列的排序时需要从头滚动则需要一个参数scrollInitFlag用来判断是否从头滚动初始值为true在排序方法中将该值设置为true同时在autoScrollFn方法中增加逻辑如下图 完整代码如下
// 表格自动滚动autoScrollFn() {clearInterval(this.scrollTimer);this.$nextTick(() {const tBody this.$refs.tableData.$refs.bodyWrapperScrollbar.$refs.wrap;// 当可视窗口高度大于表格高度时不滚动if (tBody.clientHeight tBody.scrollHeight) {return;}if (this.scrollInitFlag) {tBody.scrollTop 0;this.scrollInitFlag false;}this.scrollTimer setInterval(() {tBody.scrollTop 1; // 每次上滑一个像素// 当滚动到最底部(可视高度距离顶部整个高度)时从头开始滚if (tBody.clientHeight tBody.scrollTop tBody.scrollHeight) {tBody.scrollTop 0;}}, (1000 / 60) * 3); // 1000 / 60});},stopScrollFn() {clearInterval(this.scrollTimer);this.scrollTimer null;},// 排序sortChangeFn({ column, prop, order }) {console.log(column, prop, order);// 调用后端接口this.getDataFn();this.scrollInitFlag true;},
基本上完了做完之后我发现文字滚动的时候会抖动暂时还没有啥好的想法还有页面缩放之后滚动也不生效了后面再解决吧。
从实际应用来看若是没有我这么频繁的数据刷新还是用vue-seamless-scroll依赖吧
