uni-table组件push数据，实现向上滚动效果

在使用uni-app开发中，使用uni-table组件进行表格渲染时，默认表格为10行，超过10行出现滚动条。现通过点击事件向表格数据中push一组数据，想要实现push时表格能出现向上滚动的动画，且最后一行显示push进去的数据。应如何实现呢？

img

引用 皆我百晓生 小程序回复内容作答：
要实现向上滚动的动画效果，并且让最后一行显示新添加的数据，可以通过以下步骤来实现：

  1. 在点击事件中，将新的数据push到表格数据中。
  2. 获取表格的滚动区域的高度和滚动条的高度。
  3. 设置一个定时器，每隔一段时间执行一次滚动动画。
  4. 在定时器中，逐渐增加滚动条的滚动距离，实现向上滚动的效果。
  5. 当滚动距离达到滚动区域的高度时，清除定时器，并将滚动条的滚动距离重置为0。
  6. 在滚动动画结束后，将最后一行的数据滚动到可视区域。

以下是一个示例代码，供参考：

// 在点击事件中，将新的数据push到表格数据中
this.tableData.push(newData);

// 获取滚动区域的高度和滚动条的高度
const scrollContainer = document.querySelector('.uni-table-body');
const scrollHeight = scrollContainer.scrollHeight;
const scrollBarHeight = scrollContainer.offsetHeight;

// 设置滚动动画的参数
const duration = 500; // 动画持续时间
const interval = 10; // 每次滚动的时间间隔
const distance = scrollHeight - scrollBarHeight; // 滚动的总距离
let currentDistance = 0; // 当前滚动的距离

// 定义滚动动画的定时器
const timer = setInterval(() => {
  // 计算当前滚动的距离
  currentDistance += distance * (interval / duration);
  
  // 设置滚动条的滚动距离
  scrollContainer.scrollTop = currentDistance;
  
  // 当滚动距离达到滚动区域的高度时，清除定时器并重置滚动距离
  if (currentDistance >= distance) {
    clearInterval(timer);
    scrollContainer.scrollTop = 0;
  }
}, interval);

// 在滚动动画结束后，将最后一行的数据滚动到可视区域
this.$nextTick(() => {
  const lastRow = document.querySelector('.uni-table-body .uni-table-row:last-child');
  if (lastRow) {
    lastRow.scrollIntoView();
  }
});

请注意，以上代码仅为示例，具体实现可能需要根据你的项目结构和需求进行调整。另外，uni-table组件可能有自己的一些特殊属性和方法，你可以查阅相关文档以获取更详细的信息。