微信小程序学习之轮播图swiper

小新1102025-05-15 19:12

轮播图是小程序的重要组件，我们还是好好学滴。

1、上代码，直接布局一个轮播图组件(index.wxml)：

复制代码

<swiper class="swiper" indicator-active-color="#fa2c19" indicator-color="#fff" duration="{{duration}}" circular="{{circular}}" autoplay="{{autoplay}}" interval="{{interval}}" indicator-dots="{{indicatorDot}}">
      <swiper-item>
        <image src="https://inews.gtimg.com/news_ls/OAyGfj8q_u9hvn_h8InVmiTqjNaqzwZphygTCTwfhxYvgAA_870492/0" mode="widthFix"/>
      </swiper-item>
      <swiper-item>
        <image src="https://inews.gtimg.com/news_ls/OPxz8FA21MwfVH3gNlRBe2Ps1puF7j9PNdnSZ-LT3F5RgAA_870492/0" mode="widthFix"/>
      </swiper-item>
      <swiper-item>
        <image src="https://inews.gtimg.com/news_ls/OUkUW052LsZR4SEK19nU9fQqkJrLroMkYsPXR9p4LcTB8AA_870492/0" mode="widthFix"/>
      </swiper-item>
    </swiper>

2、轮播图属性的讲解：

indicator-active-color 当前播放页下面指示点的颜色

indicator-color 轮播图下面对应点的颜色

duration 图片切换时动画的播放时间

autoplay 自动切换

circular 采用衔接滑动

interval 切换时间间隔

indicator-dots 显示面板指示点

3、属性的赋值（index.js）

复制代码

Page({
  data: {
    value:'',
    indicatorDot:true,
    autoplay:true,
    interval:3000,
    circular:true,
    duration:1000,
  },
  
})

4、相关样式（index.wxss）

复制代码

.swiper{
  padding: 0 10rpx;
}

image{
  width: 100%;
}

好了，看效果

轮播图