Как можно выделить добавленную строку при каждом обновлении vue -virtual-scroll? - PullRequest
Новая
       30

Как можно выделить добавленную строку при каждом обновлении vue -virtual-scroll?

0 голосов
/ 26 марта 2020

Я использую recycle-scroll из vue -virtual-scroll. Я хочу выделить цвет фона строки, добавленной с помощью перехода или анимации. 

<template>
    <RecycleScroller
              :items="logs"
              :item-size="32"
              key-field="_id"
              class="scroller"
              tag="tr"
              :emit-update="true"
              @update="update"
            >
              <template slot-scope="{item}">
              ...
              </template>
    </RecycleScroller>
</template>



<script>
...
preEndIndex = 0

update(startIndex, endIndex){
  let childNode = document.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0].childNodes
  if(childNode.length > 0) {
    let diffY = endIndex-this.preEndIndex;
    let gap = childNode.length - diffY
    if(gap > 0 && diffY != 0) {
      for (var i = gap; i < childNode.length; i++) {
        childNode[i].animate([{backgroundColor: 'black'},
          {backgroundColor: 'white'}], {
          duration: 1000,
          iterations: 1,
        })
      }
    }
  }
  this.preEndIndex = endIndex
}
</script>

В некоторых случаях, когда вы пишете код таким образом, выделение часто пропускается. А когда данные добавляются один раз, событие обновления происходит дважды. Я думаю, что выделение пропущено, потому что событие обновления происходит дважды.

Мне нужна помощь для исправления этой ошибки. Так не должно быть. Буду признателен, если вы мне поможете.

...