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

<template>
  <scroll-view class="scroll-view" :style="{height: scrollViewHeight + 'px'}">
    <!-- 使用 v-for 渲染数据 -->
    <view v-for="(item, index) in dataList" :key="index" class="scroll-view-item">
      <!-- 使用动画效果展示新数据 -->
      <transition name="slide-right">
        <view v-if="showNewData && index === 0" class="new-data">{{ item }}</view>
        <view v-else>{{ item }}</view>
      </transition>
    </view>
  </scroll-view>
</template>
<script>
export default {
  data() {
    return {
      dataList: [], // 存放服务端拉取到的数据
      showNewData: false, // 是否展示新数据动画
      scrollViewHeight: 0 // scroll-view 的高度
    }
  },
  mounted() {
    // 初始化 scroll-view 的高度
    this.setScrollViewHeight()
    // 定时从服务端拉取数据
    setInterval(() => {
      this.getData()
    }, 5000)
  },
  methods: {
    // 从服务端获取数据
    getData() {
      // 模拟获取数据
      const newData = `新数据${this.dataList.length + 1}`
      // 判断是否有新数据
      if (this.dataList[0] !== newData) {
        // 将新数据插入到数组的最前面
        this.dataList.unshift(newData)
        // 显示新数据动画
        this.showNewData = true
        // 2 秒后隐藏新数据动画
        setTimeout(() => {
          this.showNewData = false
        }, 2000)
      }
    },
    // 设置 scroll-view 的高度
    setScrollViewHeight() {
      const systemInfo = uni.getSystemInfoSync()
      this.scrollViewHeight = systemInfo.windowHeight - 50
    }
  }
}
</script>
<style>
.scroll-view {
  background-color: #f5f5f5;
  padding: 10px;
  box-sizing: border-box;
}

.scroll-view-item {
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  color: #333;
  font-size: 24px;
}

.new-data {
  position: relative;
}

.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.5s ease-out;
}

.slide-right-enter,
.slide-right-leave-to {
  transform: translateX(100%);
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.slide-right-enter-to,
.slide-right-leave {
  transform: translateX(0);
  opacity: 1;
}
</style