Vant Swipe 每个swipe-item放多条数据

例：每个van-swipe-item放三条数据

calcDataList 计算共分几页

renderDataItem 根据分页传参计算当前条显示内容

1、标签部分：

<van-swipe
    ref="swipe"
    :loop="false"
    class="section-swipe"
  >
    <van-swipe-item class="list-item" v-for="item in calcDataList" :key="item">
      <div style="display: flex;background-color: #0cc;">
        <div class="list-item-wrapper">
            {{renderDataItem(item + item + item - 3)}}
        </div>
        <div class="list-item-wrapper">
            {{renderDataItem(item + item + item - 2)}}
        </div>
        <div class="list-item-wrapper">
            {{renderDataItem(item + item + item - 1)}}
        </div>
      </div>
    </van-swipe-item>
</van-swipe>

2、数据类型

dataList: [
    {
        id: 1
    },
    {
        id: 2
    },
    {
        id: 3
    },
    {
        id: 4
    },
    {
        id: 5
    }
],

3、数据计算

computed: {
    calcDataList() {
        return Math.ceil(this.dataList.length / 3)
    }
},

4、内容显示

renderDataItem(num) {
     return (this.dataList[num] && this.dataList[num].id) || ''
},