uni-app 轮播图自动轮播
时间: 2023-09-21 22:03:29 浏览: 117
轮播图自动播放
在 uni-app 中使用轮播图可以使用 `uni-swiper` 组件,如果想要实现自动轮播,可以使用 `autoplay` 属性。
示例代码:
```html
<template>
<view class="swiper-container">
<swiper class="swiper" :autoplay="autoplay">
<swiper-item>
<image src="https://example.com/1.jpg"></image>
</swiper-item>
<swiper-item>
<image src="https://example.com/2.jpg"></image>
</swiper-item>
<swiper-item>
<image src="https://example.com/3.jpg"></image>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
autoplay: true, // 开启自动轮播
};
},
};
</script>
```
在上面的示例中,设置 `autoplay` 属性为 `true`,即可开启自动轮播。你还可以设置 `autoplay` 的其他属性,如 `delay`(轮播间隔时间) 和 `disableOnInteraction`(当用户触摸后是否停止轮播),以满足自己的需求。
阅读全文