工作记录-滚动到页面底部

时间:2021-09-07
本文章向大家介绍工作记录-滚动到页面底部,主要包括工作记录-滚动到页面底部使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

需求:一个页面上需要无限添加一模一样的表单,希望每次添加的表单可以展示在页面上而不是被隐藏掉(类似微信聊天信息展示)

HTML:

    <template>

      <div ref="box">内容</div>

    </template>

  JS:

    <script>

       export default {
          methods: {
          // 需要滚动到底部调用即可

               scrollToBottom () {
                  //$nextTick 在下次 DOM 更新循环结束之后执行延迟回调

                    this.$nextTick(() => {

                      // 这边必须要.$el才能获取Vue实例关联的DOM元素
                      const container = this.$refs.box.$el

                      container.scrollTop = container.scrollHeight;

                 }),

         },

  }

}

</script>

原文地址:https://www.cnblogs.com/ajchenkxjh/p/15237975.html