微信小程序图片轮播

微信小程序之图片轮播

简介

主要是使用微信小程序中自带的控件swiper来实现。

代码

wxml

<swiper class='swiper' indicator-dots="true" autoplay="true" interval="2000" duration="1000">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>

wxss

.swiper{
  width: 100%
}
.slide-image{
  width: 100%;
  height: 100%;
}

js

data: {
    // 轮播图片url
    imgUrls: [
      '图片url地址1',
      '图片url地址2',
      '图片url地址3',
      '图片url地址4',
      '图片url地址5',
      '图片url地址6',
      
    ],
  }

想要实现更多的功能可以去查看：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html