在swiper中每个页遍历5组数据
时间: 2024-03-17 07:42:43 浏览: 62
你可以在 `swiper` 组件中使用 `v-for` 来遍历数组,并使用 `slice` 方法来分割数组,然后在每页中显示不同的数据组。以下是一个示例代码:
```html
<template>
<swiper :autoplay="true" :interval="3000">
<swiper-item v-for="(page, index) in pageCount" :key="index">
<div v-for="(item, itemIndex) in items.slice((page - 1) * 5, page * 5)" :key="itemIndex">{{ item }}</div>
</swiper-item>
</swiper>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8', 'Item 9', 'Item 10', 'Item 11', 'Item 12', 'Item 13', 'Item 14', 'Item 15', 'Item 16', 'Item 17', 'Item 18', 'Item 19', 'Item 20'],
pageCount: Math.ceil(20 / 5)
}
}
}
</script>
```
在上面的示例中,我们使用 `slice` 方法将 `items` 数组分割为每页5个元素的子数组,然后在每个 `swiper-item` 中遍历子数组并显示每个元素。你可以根据自己的需求来修改数组和每页显示的元素数量。
阅读全文