zoukankan      html  css  js  c++  java
  • vue scrollTop的使用方法

    写了一个获取命令行记录的组件,用到了scrollTop的方法,做个笔记。

    this.$nextTick(() => {
                    this.$refs.cmdlist.scrollTop = this.$refs.cmdlist.offsetHeight;
                });

    这里我需要通过cmdlist这个div来控制我的滚动条,所以对这个div用来scrollTop的方法,后面的  offsetHeight  就是获取当前我加滚动条的div的高度(因为加了滚动条,并不能获取到div的实际高度值),

    当然这个div里面一定不能加float,一定不能加!!!!!要不然这个offsetHeight  的方法是不能获取到div的高度的.

    然后我需要通过输入框输入的值,对数据进行记录。大概就是这样子的。

     data() {
            return {
                curdatalist: [],
                dataList: "",
            };
        },
        methods: {
            clickCommend() {
                this.curdatalist.push({
                    text: this.dataList,
                });
                this.dataList = "";
                this.$nextTick(() => {
                    this.$refs.cmdlist.scrollTop = this.$refs.cmdlist.offsetHeight;
                });
            },
        },

    这边主要用到了v-model绑定,和回车键的事件

     @keyup.enter="clickCommend
     
    然后就是用到了scrollTop 这个方法。
     
     
     
     
  • 相关阅读:
    复利计算5.0
    读《构建之法》第4章有感
    实验二作业调度模拟程序
    观看与评价
    结对2.03
    做汉堡
    复利计算--结对
    《构建之法》第四章
    复利单利计算器单元测试
    实验一、命令解释程序的编写实验
  • 原文地址:https://www.cnblogs.com/lovebear123/p/13346344.html
Copyright © 2011-2022 走看看