关于javascript:vue滚动事件滚动出现按钮回到顶部底部请求分页数据

42次阅读

共计 983 个字符，预计需要花费 3 分钟才能阅读完成。

最近呈现了很多页面都须要滚动翻页的需要

<div id="order" @scroll="scrollEvent" ref="scrollWrapper">
  滚动条两头内容略...
<div>
// 只做示例，就用按钮简略实现性能。<el-button round icon="el-icon-top" @click="toTop('order')" v-if="showTop"> 顶部 </el-button>

// 表格滚动
scrollEvent(e) {if (e.srcElement.scrollTop> 你心愿滚动到哪个数字会呈现‘回到顶部’，例如 300) {this.showTop = true;} else {this.showTop = false;}
  let top = e.srcElement.scrollTop; // 保留加载前的滚动条高度
  // 滑到最底部
  if (e.srcElement.scrollTop + e.srcElement.clientHeight >= e.srcElement.scrollHeight) {
    // 非最初一页都要持续申请
    if (this.page.total > (this.page.pageNum * this.page.pageSize)) {
      let self = this;
      // 除分页以外还有其余搜寻条件
      self.searchData.pageNum = self.page.pageNum+1;
      self.searchData.pageSize = self.page.pageSize;
      后端分页接口.then((res) => {if ( 后端正确返回下一页数据) {self.page.list.push(...res.result.list);
          self.page.pageNum = res.result.pageNum;
          self.page.total = res.result.total;
          // 滚动条定位
          this.$nextTick(() => {this.$refs.scrollWrapper.scrollTo(0, top);
          })
        }
      });
    }
  }
},
// 回到顶部
toTop(name) {let e = document.getElementById(name);
  e.scroll({top: 0, left: 0, behavior: 'smooth'}); // smooth 滚动不至于太快
},

正文完