vue中,每一秒一个data,如何保存所有data,并一次只要8条数据?

作者站长头像
站长
· 阅读数 8

在监听里每一秒会返回一个data,一个data长度有65位,总共大概会返回30个,我也是每一秒实时都要显示数据,一次显示8位,得按顺序来,然后得考虑到有奇数偶数的情况,假设最终只剩7条(或不足8条),就7条一起显示

怎么样保留之后的数据并实时截取呢?

举例子↓

uni.$on('getData', (obj) => {
    let data = ['aa','bb','cc','dd','ee','ff']
    // let data = ['hh','ii','jj','kk','ll','mm'] //第二次返回
    //...期待结果↓
    let result = ['aa','bb','cc'] //第一次显示
    // let result = ['dd','ee','ff'] //第二次显示
    // let result = ['hh','ii','jj'] //第三次显示
    // let result = ['kk','ll','mm'] //第四次显示
})
这里可以不看,大伙可以这样理解,服务器每秒会返回给我一段心率波形的data,一段有65个点来组成波形图,总共会发送30秒大概一秒一个data,但我不可能一次显示65个点在图标上,所以每隔8个来裁剪,我也不可能等30秒之后再全部push到一个新data里再来每8位裁剪。现在的问题就是我不知道怎么在data实时更新的情况下,记忆之前裁剪的位置并继续裁剪

小弟在这里先感谢各位大神们,感激不尽,祝大神们发财祝大神们取漂亮老婆

回复
1个回答
avatar
test
2024-06-27
// 可以理解为:
// 1.最后的结果是 [[]] 的数组,二阶数组数量:30
// 2.二阶数组长度 n 个
// 3.不用考虑缓存回收,30秒结束后销毁所有的数据
// 4.单个数组的重新切分为长度为 8 的新的数组
// 5.单数组长度不足8的用 null 补充

const len = 8;
const data = ref([]);
let index = ref(0);

// 切割单个数据
const splitHeart = list => {
    let temp = [];
    const fillLen = len - (list.length % - len);
    list.push(...new Array(fillLen).fill(null));
    list.map((item, index) => {
        const key = Math.floor(index / 8);
        temp[key] = temp[key] || [];
        temp[key].push(item); 
    })

    return temp
} 

// 获取单组数据的时候丢到总的去
const getHeartData = list => {
    list = list || new Array(65).fill(1);
    data.value.push(...splitHeart(list))
}

// 显示到页面的数据
// 按指针来,指针按你自己的需求设计 index
// 或者按你那边预期的规则来
const showData = computed(
    () => data.value[index.value]
)
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容