uniapp微信小程序之轮播图效果

爬楼梯的小新

已于 2022-06-28 16:11:11 修改

阅读量1.3k

点赞数

分类专栏： uniapp 文章标签： uniapp

于 2021-07-03 15:07:39 首次发布

本文链接：https://blog.csdn.net/weixin_57607714/article/details/118440122

版权

uniapp 专栏收录该内容

28 篇文章 6 订阅

订阅专栏

本文介绍了如何利用Swiper组件和swiper-item组件在小程序中实现轮播图效果。详细讲解了swiper的重要属性，如indicator-dots、indicator-color、indicator-active-color、autoplay、interval和circular，并提供了相应的WXML和WXSS代码示例，展示了如何设置不同背景色的轮播项。

摘要由CSDN通过智能技术生成

使用轮播图效果需要用到swiper组件和swiper-item组件

首先需要了解swiper组件的常用属性

indicator-dots 是否显示轮播图下的小圆点

indicator-color 未被选中的小圆点的颜色

indicator-acive-color 已被选中的小圆点的颜色

autoplay 是否允许轮播图自动切换默认false 如果需要自动切换直接写上不用给值

interval 是否切换图片切换时间默认时间5秒 2000=2秒

circular 是否采用衔接滚动从第一张可以倒回最后一张默认false

wxml部分：

<swiper class="lunb" indicator-dots indicator-color="#fff" indicator-active-color="red" autoplay interval="2000" circular>
  <swiper-item>
    <view class="item">a</view>
  </swiper-item>
  <swiper-item>
    <view class="item">b</view>
    </swiper-item>
  <swiper-item>
    <view class="item">c</view>
  </swiper-item>
</swiper>

wxss部分：

.lunb {
  height: 150px;
}
.lunb .item {
  height: 100%;
  text-align: center;
  line-height: 150px;
}
swiper-item:nth-child(1) .item {
  background-color: skyblue;
}
swiper-item:nth-child(2) .item {
  background-color: pink;
}
swiper-item:nth-child(3) .item {
  background-color: purple;
}