在微信小程序中写轮播图
时间: 2023-10-29 11:20:15 浏览: 35
要在微信小程序中写轮播图,你可以使用 `swiper` 组件。以下是一个简单的轮播图实现示例:
1. 在小程序页面的 `wxml` 文件中添加 `swiper` 组件
```
<swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="{{5000}}" duration="{{1000}}">
<swiper-item>
<image src="https://example.com/image1.jpg"></image>
</swiper-item>
<swiper-item>
<image src="https://example.com/image2.jpg"></image>
</swiper-item>
<swiper-item>
<image src="https://example.com/image3.jpg"></image>
</swiper-item>
</swiper>
```
2. 在小程序页面的 `wxss` 文件中添加样式
```
swiper {
width: 100%;
height: 300rpx;
}
swiper image {
width: 100%;
height: 100%;
}
```
其中,`indicator-dots` 表示是否显示指示点,`autoplay` 表示是否自动播放,`interval` 表示自动播放间隔时间,`duration` 表示滑动动画时长。
`swiper-item` 表示每个轮播项,`image` 表示轮播项的图片。
这样就可以在小程序中实现轮播图了。