swiper实现图片轮播

最新推荐文章于 2025-05-31 20:13:02 发布

原创最新推荐文章于 2025-05-31 20:13:02 发布 · 585 阅读

1 ·

CC 4.0 BY-SA版权

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

37 篇文章

订阅专栏

本文详细介绍了WeChat小程序中的Swiper组件，包括如何设置图片轮播功能、自动播放、指示点样式以及AspectFit模式的使用。通过代码实例演示了如何配置Swiper组件以实现动态图片展示和用户交互。

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

<!--index.wxml-->
<swiper autoplay vertical circular indicator-dots indicator-color="#fff" indicator-active-color="#888" 
        interval="2500" duration="1000">
  <swiper-item wx:for="{{imgUrls}}" wx:k="*this">
    <image src="{{item}}" mode="aspectFill"></image>
  </swiper-item>
</swiper>

/**index.wxss**/
image{
  width: 100vw;
  height: 100vh;
}
swiper{
  height: 100vh;
}

// index.js
Page({
  data:{
    imgUrls:[
      "../../images/pic1.jpg",
      "../../images/pic2.jpg",
      "../../images/pic3.jpg",
      "../../images/pic4.jpg"
    ]
  }
})

在这里插入图片描述

swiper
- indicator-dots，是否显示面板指示点，布尔值，默认是false，即不显示。
- indicator-color，指示点颜色。
- indicator-active-color，当前选中的指示点颜色。
- autoplay，是否自动切换，布尔值，默认是false，即不切换。
- interval，自动切换时间间隔，数值，默认是5000，单位是毫秒。
- duration，滑动动画时长，数值，默认是500，单位是毫秒。
- vertical，滑动方向是否是纵向，布尔值，默认是false，即默认横向滑动。
- circular，是否采用衔接滑动，布尔值，默认是false，即不衔接滑动。
image
- mode，图片裁剪、缩放的模式
  - aspectFit，缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向会发生截取。