WeChat Mini Program (2)

The first point carousel map of the applet must be developed from the home page, so the carousel map is a must, a relatively good carousel map.

wxml

<swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500">  
    <block wx:for="{{activePhoto}}" wx:for-index="index">    
      <swiper-item>
        <image src="https://xiaoyuan.tianshuai.com.cn/Public/Home/Uploads/picture/{{item.cover}}" class="slide-image" mode="aspectFill"/>    
      </swiper-item>
    </block>
  </swiper>

wxss

.swiper {
  height: 300rpx;
  width: 100%;
}
.swiper image {
  height: 100%;
  width: 100%;
}

js

var app = getApp ()  
Page({
 data: {
 activePhoto:[
  {url:'http://img04.tooopen.com/images/20130712/tooopen_17270713.jpg'} ,  
  {url:'http://img04.tooopen.com/images/20130617/tooopen_21241404.jpg'} ,  
  {url:'http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg'} ,  
  {url:'http://img02.tooopen.com/images/20141231/sy_78327074576.jpg'}   
  ]  
 },  
 onLoad: function () {

 }  
})