vant组件的van-list使用,问题见详情,请大牛解答

Question

父组件发送请求获取到数据data,格式为
{
"code": 200,
"msg": "成功",
"data": {

"vosdata": [
  {
    "Id": "sku0",
   "imageUrl": "xxx.png",
    "describe": ''
  },
  {
    "skuId": "sku1",
    "imageUrl": "xxx.png",
    "describe": ''
  },
  {
    "Id": "sku2",
    "imageUrl": "xxx.png",
    "describe": ''
  }
]

}
}
实际有很多数据
将请求的数据通过props传到子组件
van-list组件的load方法如何写才能实现每次更新10条数据,
<div

    class="jump-shop"
    v-for="(item,index) in vosdata"
    :key="index"
    :title="index"
  >
  <img :src="item.imageUrl" alt="">
  {{index}}
  </div>
  

onLoad() {

  // 异步更新数据
  setTimeout(() => {
    for (let i = 0; i < 4; i++) {
      this.vosdata.push(this.vosdata.length + 1)
    }
    // 加载状态结束
    this.loading = false
    // 数据全部加载完成
    if (this.list.length >= 40) {
      this.finished = true
    }
  }, 500)
}

我这么写会造成多遍历4个空白数据,并且一进页面就全部加载,下拉加载也失效了.

Answer 1

错了吧，vosdata列表里的每个元素是对象，你追加的是数字

this.vosdata.push(this.vosdata.length + 1)