vue左右滑动分页,vue设置页面滚动

　　这篇文章主要为大家详细介绍了某视频剪辑软件实现纯前端表格滚动分页加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了某视频剪辑软件实现表格滚动分页加载的具体代码，供大家参考，具体内容如下

　　实现效果

　　实现过程

　　差异

　　style= width:100%；溢出：隐藏；位置：相对

　　id="容器"

　　ref=容器

　　@mousewheel=handleScroll

　　:style={ height: pageHeight px }

　　！-表格-

　　div class= loading-bottom v-show= visible loading

　　a-spin:spining= visible loading style= margin-right:10px /a-spin正在加载数据

　　/div

　　/div

　　射流研究…

　　data() {

　　返回{

　　visibleLoading: false，

　　}

　　},

　　已安装(){

　　//ref指向对应div，不建议对窗户全局监听，会影响子差异的滚动

　　这个参考文献。集装箱。addevent侦听器( scroll ，this。手柄滚动)；

　　},

　　卸载之前(){

　　这个参考文献。集装箱。removeeventlistener( scroll ，this。手柄滚动)；

　　},

　　方法：{

　　//滚轮监听

　　handleScroll() {

　　设listAllHeight=

　　文档。文档元素。滚动顶部

　　文档。身体。滚动顶部文档。文档元素。滚动高度

　　文档。身体。滚动高度；

　　让容器高度=文档。查询选择器(“# container”).滚动高度

　　//46 62 75是表格距离页面顶部的剩余距离，跟个人布局有关

　　设字段高度=文档。查询选择器(#左字段).scrollHeight 46 62 75

　　如果（

　　(字段高度=容器高度this。页面高度！==fieldHeight)

　　(容器高度字段高度本。页面高度！==集装箱高度)

　　) {

　　this.visibleLoading=true

　　}

　　setTimeout(()={

　　如果(列出所有高度===这个。此页面高度。页面高度容器高度){

　　这个。页面高度=这个。页面高度750；

　　}

　　如果(这个。页面高度容器高度字段高度){

　　这个。页面高度=容器高度；

　　}

　　如果(这个。页面高度字段高度字段高度=容器高度){

　　这个。页面高度=字段高度；

　　}

　　this.visibleLoading=false

　　}, 500);

　　},

　　}

　　钢性铸铁。底部装载{

　　位置：绝对；

　　左：255像素

　　底部：0;

　　高度：30px

　　填充：5px 0；

　　背景色：# d3dae6

　　宽度：calc(100%-270 px)；

　　文本对齐：居中；

　　字体大小：14px

　　字体粗细：500;

　　边框-半径：2px

　　}

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。