小程序Studying——輪番圖

搞了一天小程序，最後看這位大佬https://blog.csdn.net/qq_31383345/article/details/52810380#commentsedit寫的，纔會這個使用swiper做出輪番圖。就是讓圖片啊，滑動起來，怎麼說尼，看吧

先看代碼吧

//index.wxml

 <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">  
      <block wx:for="{{movies}}" wx:for-index="index">  
        <swiper-item>  
          <image src="{{item.url}}" class="slide-image" mode="aspectFill"/>  
        </swiper-item>  
      </block>  
</swiper> 

參數說明：

//index.wwss

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

//index.js

const app = getApp()
var util = require('../../utils/util.js');
Page({
  data: {
    animationData:null,
    imgs:[],
    movies:[
      { url: 'https://cdn.pixabay.com/photo/2019/07/03/20/59/abendstimmung-4315445__340.jpg' },
      { url: 'https://cdn.pixabay.com/photo/2019/06/29/05/24/pakistan-4305430__340.jpg '},
      { url: 'https://cdn.pixabay.com/photo/2019/06/24/17/49/mythical-4296587__340.jpg' },
      { url: 'https://cdn.pixabay.com/photo/2019/07/01/01/21/algarve-4309022__340.jpg' }   
    ]
  },

大佬說是便利movies[]數組，<swiper-iterm>就是item，其實裏面就是圖片的路徑，自己可以隨便定義哦