【页面案例汇总】轮播图uni-app微信小程序页面

轮播图uni-app微信小程序页面

---

1. 引入uni-app自带的组件uni-swiper

在页面的.vue文件中，通过template标签引入uni-swiper组件，例如：

<template>
  <view>
    <uni-swiper :indicator-dots="true" :autoplay="true">
      <uni-swiper-item>
        <image src="../../static/img/banner1.jpg"></image>
      </uni-swiper-item>
      <uni-swiper-item>
        <image src="../../static/img/banner2.jpg"></image>
      </uni-swiper-item>
      <uni-swiper-item>
        <image src="../../static/img/banner3.jpg"></image>
      </uni-swiper-item>
    </uni-swiper>
  </view>
</template>

可以通过给uni-swiper组件设置不同的属性值来控制轮播图的效果，比如indicator-dots设置为true，则会显示轮播图下方的小圆点来展示当前轮播图的位置；autoplay设置为true则表示开启自动循环轮播。

2. 在页面中引入轮播图所需的图片

在示例代码中，我们将轮播图的图片放在了静态资源目录static/img/下。当然你也可以存放在其他地方，并在image标签的src属性中指定图片地址。

到这里我们就完成了一个简单的轮播图展示。当然，你还可以根据需要自定义轮播图的样式和效果。