微信小程序 轮播图代码

微信小程序轮播图的代码如下：

首先，在小程序的 wxml 文件中，添加如下代码：

<!-- 轮播图组件 -->
<swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}" wx:key="*this">
    <swiper-item>
      <image src="{{item}}" class="slide-image" mode="aspectFit"></image>
    </swiper-item>
  </block>
</swiper>

然后，在小程序的 js 文件中，添加如下代码：

//轮播图片数组
  data: {
    imgUrls: [
      'https://image.weilanwl.com/color2.0/3.jpg',
      'https://image.weilanwl.com/color2.0/4.jpg',
      'https://image.weilanwl.com/color2.0/5.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000
  },

这样就可以在小程序中使用轮播图了。

注意：文章来源地址https://uudwc.com/A/vmDxN

• imgUrls 中存储的是图片的 URL 地址，可以将自己的图片地址替换进去。
• indicatorDots 表示是否显示面板指示点，autoplay 表示是否自动切换，interval 表示自动切换时间间隔，duration 表示滑动动画时长。