微信小程序轮播图

1.1 效果

1.2 代码

<view class="container">
  <swiper autoplay interval="4000" circular indicator-dots>
    <block wx:for="{{itemList}}" wx:key="index">
      <swiper-item>
        <view class="content" style="{{item.backgroundColor}}">
          <text class="item-text">{{item.title}}</text>
        </view>
      </swiper-item>
    </block>
  </swiper>
</view>

//wxss
.container {
  height: 200rpx;
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200rpx;
}

.item-text {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200rpx;
  margin: 0;
}

//js
Page({
  data: {
    itemList: [
      { title: '1', backgroundColor: 'background-color: #d3dce6;' },
      { title: '2', backgroundColor: 'background-color: #99a9bf;' },
      { title: '3', backgroundColor: 'background-color: #d3dce6;' },
      { title: '4', backgroundColor: 'background-color: #99a9bf;' },
      { title: '5', backgroundColor: 'background-color: #d3dce6;' },
      { title: '6', backgroundColor: 'background-color: #99a9bf;' },
    ]
  }
})