微信小程序-轮播图的实现

实现如图所示轮播图，具体编写步骤及原代码请见下方

编写 index.wxml

<!--轮播图-->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{activeColor}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <navigator url="{{item.link}}" hover-class="navigator-hover">
        <image src="{{item.url}}" class="slide-image" width="355" height="200" />
      </navigator>
    </swiper-item>
  </block>
</swiper>

编写index.wxss

/*轮播图*/
.slide-image {
  width: 100%;
 }

编写 index.js

Page({
  data: {
  imgUrls: [
  {
  link: '/pages/index/index',
  url: '/images/001.jpg'
  }, {
  link: '/pages/list/list',
  url: '/images/002.jpg'
  }, {
  link: '/pages/list/list',
  url: '/images/003.jpg'
  }
  ],
  indicatorDots: true, //小点
  indicatorColor: "white",//指示点颜色
  activeColor: "coral",//当前选中的指示点颜色
  autoplay: false, //是否自动轮播
  interval: 3000, //间隔时间
  duration: 3000, //滑动时间
  }
})