微信小程序 swiper和weiper-itme组件的基本使用，微信小程序轮播图这么做教程

微信小程序Swiper组件使用教程

最新推荐文章于 2025-10-22 14:15:32 发布

原创最新推荐文章于 2025-10-22 14:15:32 发布 · 3.4k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #前端

微信小程序专栏收录该内容

18 篇文章

订阅专栏

本文介绍了Swiper组件的作用，它是一个滑块视图容器，通常用于创建轮播图。文中详细讲解了如何使用swiper和swiper-item来构建轮播图，包括添加多个swiper-item来展示多张图片，以及通过设置不同的属性如indicator-dots、indicator-color、indicator-active-color、autoplay、interval和circular来实现轮播图的指示点、颜色、自动切换等功能。最后，文章通过示例展示了这些属性的使用效果，帮助读者理解并应用到实际项目中。

1.swiper组件是干嘛的？

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

2.swiper和swiper-itme怎么使用？

接下来我尝试教大家怎么使用swiper组件去做一个轮播图效果

和之前一样，先设置一个空页面。

我们先写入一个基础代码格式

<swiper>
  <swiper-item>
    <view>A</view>
  </swiper-item>
</swiper>

我们可以看到代码中swiper标签下有一个swiper-itme标签下有一个view标签，

为什么这么嵌套呢？

因为swiper把他比作一个大盒子，swiper-itme 比作一个大盒子中的小盒子如图

正常情况下swiper代表整个块是轮播图，seiper-itme代表每一张图，但是我们写代码的原则是能不能懂他原来的框架就不动，尽然swiper-itme是代表每一张图，我们就在里面写image或这view都可以对吧，所以由此得出上面的格式，但是我上图只显示了一个A，如果我要多张轮播图，是不是要复制多个swiper-itme标签由此可以得出一下代码：

<swiper>
  <swiper-item>
    <view>A</view>
  </swiper-item>
  <swiper-item>
    <view>B</view>
  </swiper-item>
  <swiper-item>
    <view>C</view>
  </swiper-item>
</swiper>

这样我们就能看到左边的示范图他就可以滑动了

这时候为了方便查看我们给代码加一点样式

修改后代码为

list.wxml

<swiper class="siwper-container">
  <swiper-item>
    <view class="itme">A</view>
  </swiper-item>
  <swiper-item>
    <view class="itme">B</view>
  </swiper-item>
  <swiper-item>
    <view class="itme">C</view>
  </swiper-item>
</swiper>

list.wxss

.itme{
  height: 150px;
  background-color: lightskyblue;
  text-align: center;
  line-height: 150px;
}

到这里轮播图基本制作完成了，接下来我们看看可以经常使用的属性

属性	类型	默认值	必填	说明	最低版本
indicator-dots	boolean	false	否	是否显示面板指示点	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色	1.1.0
indicator-active-color	color	#000000	否	当前选中的指示点颜色	1.1.0
autoplay	boolean	false	否	是否自动切换	1.0.0
interval	number	5000	否	自动切换时间间隔	1.0.0
circular	boolean	false	否	是否采用衔接滑动	1.0.0