elementUI之无限滚动

最新推荐文章于 2024-07-17 08:44:51 发布

工控匠

最新推荐文章于 2024-07-17 08:44:51 发布

阅读量1.1k

点赞数

分类专栏： asp.net 文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/wanxiweilai/article/details/128451519

版权

asp.net 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该文章介绍了一个在Webview中应用Vue.js组件el-table时，如何创建一个自动滚动的效果。通过获取表格的DOM元素，特别是表格数据的div容器，然后使用setInterval定时器增加div的scrollTop属性来模拟滚动。当滚动到底部时，重置scrollTop为0，从而实现循环滚动。

摘要由CSDN通过智能技术生成

 <el-table :data="tableData" height="300" border style="width: 70vw" ref="table">
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
   
mounted() {

                const table = this.$refs.table// 拿到表格挂载后的真实DOM
                const divData = table.bodyWrapper// 拿到表格中承载数据的div元素
                // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
                setInterval(() => {
                    divData.scrollTop += 1// 元素自增距离顶部1像素
                    // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
                    if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
                        divData.scrollTop = 0// 重置table距离顶部距离
                    }
                }, 50) 
            },

如何在webview中实现滚动？？？