Wechat applet development - Implementation of rotation chart

Applet , The mobile terminal is inseparable from the function of the carousel map , The following is to write a small program to share with you the function of the rotation chart

design sketch ：

 

1. Page code

<!--index.wxml-->
<view class="container">
    <!-- Shuffling figure -->
  <swiper class="home-swiper" indicator-dots="true" autoplay="{
   {autoplay}}" interval="{
   {interval}}" duration="{
   {duration}}">
    <block wx:for-items="{
   {lunboData}}">
      <swiper-item>
        <image src="{
   {item.imgurl}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>
</view>

2. Configuration information

//index.js
Page({
  data: {
    // Carousel configuration 
    autoplay: true,
    interval: 3000,
    duration: 1200
  },
  onLoad: function () {
    var that = this; 
    var data = {
      "datas": [
        {
          "id": 1,
          "imgurl": "../../images/a1.jpg"
        },
        {
          "id": 2,
          "imgurl": "../../images/a2.jpg"
        }
      ]
    }; 
    that.setData({
      lunboData: data.datas
    })
  }
})

3. Configuration style

/**index.wxss**/

/* Carousel control */

.home-swiper {
  width: 95%;
  height: 360rpx;
}

.slide-image {
  width: 100%;
  height: 100%;
}