uniapp 组件swiper 的用法
时间: 2023-10-09 08:14:06 浏览: 357
swiper
是 uniapp
提供的一个轮播图组件,可以实现图片轮播、广告轮播等功能。以下是使用方法:
- 在
template
中引入swiper
组件:
<swiper :indicator-dots="true" :autoplay="true">
<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>
- 在
script
中设置swiper
的属性:
export default {
data() {
return {
swiperOptions: {
indicatorDots: true, // 显示面板指示点
autoplay: true // 自动切换
}
}
}
}
- 将
swiperOptions
传递给swiper
组件:
<swiper :options="swiperOptions">
<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>
以上是 swiper
组件的基本用法,还有很多其他属性和方法可以使用,具体可以参考 uniapp
官方文档。