小程序实现轮播图

1.利用滑块视图容器swiper,注意其中只能放 <swiper-item> 组件。

  <view class='banner-box'>
    <swiper class='swiper' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" indicator-active-color="#ffffff">
      <block wx:for="{{background}}" wx:key="*this">
        <swiper-item>
          <image src='{{item}}'></image>
        </swiper-item>
      </block>
    </swiper>
  </view>

2.需要更多的属性话，官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

Page({
  data: {
    background: ["../../image/banner1.jpg", '../../image/banner2.jpg', '../../image/banner3.jpg'],
    indicatorDots:true,
    autoplay:true,//是否自动切换
    interval:2000,//自动切换时间间隔
    duration:500,//滑动动画时长
    circular:true,//滑动衔接
  },
})

3.我这里只是大概的写了一下样式，没有过多的调整。

.container {
  width: 100%;
}

.container .swiper {
  width: 100%;
  height: 100%;
  display: flex;
}

.container .banner-box {
  width: 100%;
  height: 400rpx;
}

.container .banner-box image {
  width: 100%;
  height: 100%;
}

最终效果：