微信小程序学习笔记-swiper-20200303

最新推荐文章于 2025-04-27 08:48:02 发布

Ryan_kai

最新推荐文章于 2025-04-27 08:48:02 发布

阅读量154

点赞数

分类专栏：小程序学习文章标签：小程序 html 前端 css javascript

本文链接：https://blog.csdn.net/weixin_44367917/article/details/104639139

版权

小程序学习专栏收录该内容

1 篇文章

订阅专栏

本文介绍了微信小程序中Swiper组件的使用，包括其作为轮播图容器的含义和基本格式。重点讲解了indicator-dots、autoplay、duration、interval和circular等关键属性，以及如何通过设置这些属性实现轮播图的定制效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

swiper

1、含义与格式
swiper是小程序里的一个视图容器，实现的是轮播图的效果，使用的格式如下

<swiper 属性名="属性值">
  <swiper-item></swiper-item>
</swiper>

2、常用属性
以下是一段较为简单的swiper示例代码，解释一下几个常用的属性：
<1> indicator-dots 即标记当前轮播图片位置的小圆点，true为展示这些小圆点，默认为false
<2> autoplay 见名思意即是是否自动轮播，默认为false
<3> duration 为每一张图片展示的停留时间，单位为ms
<4> interval 为两张相邻图片之间轮播的时间间隔，单位为ms
<5> circular 为是否循环滚动，默认为false

<!-- 首页轮播图-基本写法 -->
<swiper class='swiper-container' indicator-dots="true" autoplay="true" duration="1500" interval="2000" circular="true">
  <swiper-item>
    <image class='login-img' src='../resource/images/welcome/dsp01.jpg'></image>
  </swiper-item>
  <swiper-item>
    <image class='login-img' src='../resource/images/welcome/dsp02.jpg'></image>
  </swiper-item>
  <swiper-item>
    <image class='login-img' src='../resource/images/welcome/dsp03.jpg'></image>
  </swiper-item>
</swiper>

wxss的代码如下，可按需自定义

.login-img{
  width:100%;
  height:100%
}

.swiper-container{
  width:100%;
  height:500rpx
}

3、实现效果如下
在这里插入图片描述