微信小程序轮播图实现

在微信小程序中一般是用swiper这个标签来实现的,我们在微信小程序文档中可以查看组件详情,如图：

代码实现：

## swiper.wxml页面
  <swiper indicator-dots="{ {indicatorDots} }" autoplay="{ {autoplay} }" interval="{ {interval} }" duration="{ {duration} }">
    <block wx:for="{ {imgUrls} }">
      <swiper-item>
        <image src="{ {item} }" />
      </swiper-item>
    </block>
  </swiper>

## swiper.js
  data: {
    indicatorDots: true, //设置是否显示面板指示点
    autoplay: true, //设置是否自动切换
    interval: 3000, //设置自动切换时间间隔,3s
    duration: 1000, //  设置滑动动画时长1s
    imgUrls: [
      'https://a4.vimage1.com/upload/flow/2017/10/20/117/15084234.jpg',
      'https://a2.vimage1.com/upload/flow/2017/11/07/73/151002343.jpg',
      'https://b.vimage1.com/upload/mst/2017/11/04/139/23b96f080.jpg'
    ]
  },

## swper.wxss
/* 设置swiper属性 */
swiper {
  height: 300rpx;
  padding: 2px 10px;
}

/*设置图片属性*/
swiper-item image {
  width: 100%;
  height: 100%;
}

可以看看的小程序 一起学习进步

效果图：