微信小程序首页展示轮播图模板

---

要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)

---

wxml:

<view class="container">
  <swiper class="banner" indicator-dots="true" current="0" autoplay="true" interval="3000" duration="1000">
    <swiper-item wx:for="{{brands}}" wx:key="id">
      <image src="{{item.url}}" class="slide-image" mode="aspectFill"></image>
    </swiper-item>
  </swiper>
</view>

js:

Page({
  data: {
    brands: [
      {url:"/static/img/home1.jpg"},
      {url:"/static/img/home2.jpg"},
      {url:"/static/img/home3.jpg"}
    ],
  },
})

wxss:

.container {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #f4f4f4;
  display: flex;
}

.banner image {
  width: 100%;
  height: 500rpx;
}

.slide-image {
  display: inline;
}

好了，很简单的功能，希望能有所帮助吧！！！