技術標籤：小程式js小程式

微信小程式輪播圖

效果圖：

wxml頁面

<view>
  <!--輪播圖-->
     <swiper indicator-dots='true' autoplay='true' interval='2000'  duration='1000' circular='true'>
       <block wx:for="{{move}}" wx:for-index="index">
         <swiper-item>
           <image src='{{item.url}}' mode='aspectFill' style="width:100%"></image>
         </swiper-item>
       </block>
     </swiper>
  </view>
 

js頁面

data：{
move: [
      { url: 'https://www.wohaoyun.com/img_880/M00/09/F2/wKjg2lwB3x2AAZ4JAAjsoc-4Dsw621.jpg' },
      { url: 'http://5b0988e595225.cdn.sohucs.com/images/20181130/c2f83724f22f40708d9fa49dceeacede.jpeg' },
      { url: 'http://img.mp.itc.cn/upload/20170103/f3f9c30b606a4e5fb6d68c99e7152f98_th.jpeg' },
      { url: 'http://www.shang360.com/upload/article/20170828/13897539521503886257.jpg' }
    ]},
 

註釋：
indicator-dots=‘true’：(boolean) 是否顯示面板指示點
autoplay=‘true’：(boolean) 是否自動切換
interval=‘2000’：(number) 自動切換時間間隔
duration=‘1000’：(number) 滑動動畫時長
circular=‘true’：(boolean) 是否採用銜接滑動