Vue中点击加载更多滚动条滚动到页面最底部

淩亂°似流年 2023-10-11 13:35 13阅读 0赞

<template>
      <div>
        <div class="table-container" ref="table-container">
          <table class="table">
            <tr v-for="(row,index) in data.slice(0,page)" :key="index">
              <td>{
       {index}}</td>
              <td>{
       {row.name}}</td>
              <td>{
       {row.title}}</td>
            </tr>
          </table>
        </div>
        <div class="load-more" @click="loadMore">加载更多</div>
      </div>
    </template>

如上是HTML部分，

js部分如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDAxMTU0Mw_size_16_color_FFFFFF_t_70][]

今天写了半天一直不能去页面底部，以前用jquery一直是这么写的，坑死了。

原来vue需要用nextTick才能去更新dom，气死了。所以各位小伙伴也要注意。免得白浪费时间。

js代码如下：

this.$nextTick(() => {
            let tablePar = this.$refs["table-container"];
            tablePar.scrollTop = tablePar.scrollHeight;
          });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDAxMTU0Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190925223631510.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDAxMTU0Mw==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中点击加载更多滚动条滚动到页面最底部

<template> <div> <div class="table-container" ref="table-container">

淩亂°似流年/ 2023年10月11日 13:35/ 0 赞/ 14 阅读

相关 js 滚动条自动滚动到最底部

简介：功能简介，js 滚动条自动滚动到最底部效果展示： ![bb23a00672684fb2b7cf683b81c3e66e.png][] 核心代码： w

朱雀/ 2023年09月26日 22:23/ 0 赞/ 144 阅读

相关 uni-app 滚动到底部加载更多数据

为页面底部添加正在加载动画，可以使用组件 [uLi-load-more][]，直接点击使用HBuilder 导入插件，可以不用引入和注册该组件，但 HBuilderX版本应高

﹏ヽ暗。殇╰゛Y/ 2023年01月09日 12:59/ 0 赞/ 287 阅读

相关 Js滚动条到底底部加载更多

[https://blog.csdn.net/qq\_40816649/article/details/86512538][https_blog.csdn.net_qq_408

傷城~/ 2022年12月27日 08:45/ 0 赞/ 148 阅读

相关页面滚动条固定到最底部

页面滚动条固定到最底部项目中遇到的需求,具体可以用来实现聊天室发送消息后使最后发的消息展示在页面上等, 方法亲测有效 1. 在想要定位的位置添加一个空的`div`

Dear 丶/ 2022年12月08日 01:59/ 0 赞/ 120 阅读

相关 vue js页面滚动到最底部

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ODM4

向右看齐/ 2022年10月22日 04:30/ 0 赞/ 195 阅读

相关 jQuery 拉动滚动条到底部加载数据

代码很简单： <div id="assDiv" style="height: 350px;overflow-y: auto;" > </div

向右看齐/ 2022年04月14日 02:42/ 0 赞/ 334 阅读

相关 vue实现滚动条加载更多数据

原理： 1、参考线位置lineHeight：即判断滚动到何处触发事件； 2、页面卷入的高度scrollHeight； 3、浏览器窗口的高度windowHeig

Myth丶恋晨/ 2022年04月06日 05:56/ 0 赞/ 502 阅读

相关 vue 实现滚动到页面底部开始加载更多

直接上代码： <template> <div class="newsList"> <div v-for="(items, index) i

快来打我*/ 2021年12月17日 08:47/ 0 赞/ 649 阅读

相关 vue 滚动条移动到最底部

vue中div内的文字是动态刷新的，文字多了以后，滚动条没有实时滚动到最新文字的地方解决办法：使用以下代码 var container = this.$el

妖狐艹你老母/ 2021年09月01日 07:02/ 1 赞/ 1061 阅读