用nvue帮我写一段每隔5秒从服务端定时拉取数据如果有新数据则在页面scroll-view使用右移效果

<template>
  <scroll-view class="content" ref="scrollView">
    <div class="data-list">
      <div v-for="(item, index) in dataList" :key="index" class="data-item">
        {{ item }}
      </div>
    </div>
  </scroll-view>
</template>
<script>
export default {
  data() {
    return {
      dataList: [], // 数据列表
      timer: null // 定时器
    };
  },
  mounted() {
    // 页面加载时启动定时器
    this.timer = setInterval(this.pullData, 5000);
  },
  destroyed() {
    // 页面销毁时清除定时器
    clearInterval(this.timer);
  },
  methods: {
    pullData() {
      // 发送请求获取数据
      // 假设返回一个数组
      const newDataList = this.getDataFromServer();
      if (newDataList.length > this.dataList.length) {
        // 如果有新数据，则使用右移效果滚动到最右侧
        this.$refs.scrollView.scrollTo({
          x: this.$refs.scrollView.scrollWidth,
          behavior: 'smooth'
        });
      }
      this.dataList = newDataList;
    },
    getDataFromServer() {
      // 模拟请求数据
      return ['新数据1', '新数据2', '新数据3', '新数据4'];
    }
  }
};
</script>
<style>
.content {
  height: 300px;
  overflow-x: scroll;
}

.data-list {
  display: flex;
  flex-direction: row;
}

.data-item {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style