uniapp nvue 定时拉取数据并淡入显示 - 5秒刷新数据

<template>
  <view>
    <view v-for='(item, index) in dataList' :key='index'>{{ item }}</view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      dataList: [], // 数据列表
      timer: null // 定时器
    }
  },
  onLoad() {
    this.getDataList() // 页面加载时先拉取一次数据
    this.timer = setInterval(() => {
      this.getDataList() // 每隔5秒拉取一次数据
    }, 5000)
  },
  methods: {
    getDataList() {
      // 从服务端拉取数据
      // 假设数据格式为 { data: ['数据1', '数据2', ...] }
      const res = await uni.request({
        url: 'xxxxx',
        method: 'GET'
      })
      const newDataList = res.data.data
      // 判断是否有新数据
      const hasNewData = newDataList.some(item => {
        return !this.dataList.includes(item)
      })
      if (hasNewData) {
        // 有新数据则淡入显示
        uni.showToast({
          title: '有新数据',
          icon: 'none',
          duration: 2000
        })
      }
      // 更新数据列表
      this.dataList = newDataList
    }
  },
  onUnload() {
    clearInterval(this.timer) // 页面卸载时清除定时器
  }
}
</script>