带有自动滚动功能的 vue 大列表

Question

我想在我的页面上有一个自动滚动日志。日志从 REST 端点动态轮询。现在的问题是这个日志会变得非常大，所以我使用vue-virtual-scroll-list 来显示日志。我还希望日志自动滚动到底部，除非我向上滚动时要保持滚动位置。为此，我使用了vue-chat-scroll。现在的问题是日志滚动在开始时工作正常，但在几百个条目后滚动条完全混乱，不再匹配内容，也不会自动滚动到底部。我写的vue组件是这样的：

Vue.component('log', {
  data: function() {
    return { msgs: [] }
  },

  props: {
    id: { type: String, required: true },
    length: { type: Number, required: true },
    refreshRate: { type: Number, default: 1000 }
  },

  template: 
      '<virtual-list :size="40" :remain="length" class="list-unstyled" :ref="id" v-chat-scroll="{always: false}">\
        <li v-for="msg in msgs" :key="msg.id" :class="logColor(msg.severity)">\
          <pre>[{{ shortTimestamp(msg.timestamp) }}]: {{ msg.message }}</pre>\
        </li>\
      </virtual-list>',

  methods: {
    fetchLogs: function(){
      var session = this.id;
      var start = -this.length;
      if (this.msgs.length > 0)
        start = this.msgs[this.msgs.length - 1].id;

      var vue = this;
      $.post(getUrl("/sessions/" + session + "/log"), JSON.stringify({
        start: start
      })).then(function(data) {
        for(var msg of data){
          vue.msgs.push(msg);
        }
      });
    },

    shortTimestamp: function(time) {
      var fulldate = new Date(time);
      return fulldate.toLocaleTimeString();
    },

    logColor: function(severity) {
      switch (severity) {
        case "Trace":
          return "list-group-item-light";
        case "Debug":
          return "list-group-item-dark";
        case "Information":
          return "list-group-item-info";
        case "Notice":
          return "list-group-item-primary";
        case "Warning":
          return "list-group-item-warning";
        case "Error":
          return "list-group-item-danger";
        case "Critical":
          return "list-group-item-danger";
        case "Fatal":
          return "list-group-item-danger";
      }
    }
  },

  mounted: function() {
    setInterval(function () {
      this.fetchLogs();
    }.bind(this), this.refreshRate); 
  }
})

有没有办法解决这个问题？

Answer 1

我认为使用Vuescroll 可能会解决您的问题。

• 首先，Vuescroll 有handle-resize 事件，可以帮助你检测内容的大小变化并对你做出反应。
• 其次，Vuescroll 有scrollTo Api，可以帮助你滚动到页面的任意位置。
• 最后，但是如何解决数据过多的问题？ OK，您可以根据自己的需要，通过监听handle-scroll事件手动定制数据数组。