uniapp在swiper里遍历数组,分别遍历到各个页
时间: 2023-11-17 19:05:34 浏览: 142
uniapp swiper 图片高度根据图片宽度自适应+通过选项卡跳到锚点位置+滑动到某个要素位置添加事件
5星 · 资源好评率100%
你可以在 `swiper` 组件中使用 `v-for` 来遍历数组,然后在每页显示数组中的不同元素。以下是一个示例代码:
```html
<template>
<swiper :autoplay="true" :interval="3000">
<swiper-item v-for="(item, index) in items" :key="index">
<div>{{ item }}</div>
</swiper-item>
</swiper>
</template>
<script>
export default {
data() {
return {
items: ['Page 1', 'Page 2', 'Page 3']
}
}
}
</script>
```
在上面的示例中,我们在 `swiper-item` 中使用 `v-for` 遍历了 `items` 数组,并在每页中显示了不同的元素。你可以根据自己的需求来修改数组和显示方式。
阅读全文