//index.js Page({ data: {   swiperImages: [     '/images/swiper1.jpg',     '/images/swiper2.jpg',     '/images/swiper3.jpg',     '/images/swiper4.jpg',     '/images/swiper5.jpg',     '/images/swiper6.jpg'     ] },   }) <!-- 首頁.wxml --> <!-- 使用微信小程序的視圖語言WXML --> <view class="container"> <!-- 使用swiper組件實現循環展示6張圖片 --> <swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" circular="true"> <!-- 使用block標籤和wx:for指令遍歷圖片數組 --> <block wx:for="{{swiperImages}}" wx:key="index"> <!-- 使用swiper-item組件顯示每一張圖片 --> <swiper-item class="swiper-item"> <image src="{{item}}" class="image"></image> </swiper-item> </block> </swiper> </view> /* 首頁.wxss */ /* 使用微信小程序的樣式語言WXSS */ .container {   /* 設置容器的寬高和背景色 */   width: 100%;   height: 100%;   background-color: #f0f0f0;   padding: 0;   }      .swiper {   /* 設置swiper的高度 */   height: 400rpx;   width: 100%;   }      .swiper-item{   height: 400rpx;   width: 100%;   }   .swiper-item image {   /* 設置圖片的寬高和對齊方式 */   width: 100%;   height: 100%;   object-fit: cover;   }

//index.js //获取应用实例 const app = getApp() Page({ data: { //轮播图数据 imgUrls: [ '/images/swiper1.jpg', '/images/swiper2.jpg', '/images/swiper3.jpg', '/images/swiper4.jpg', '/images/swiper5.jpg', '/images/swiper6.jpg' ], //是否显示面板指示点 indicatorDots: true, //是否自动切换 autoplay: true, //自动切换时间间隔 interval: 3000, //滑动动画时长 duration: 1000 } }) <!--index.wxml--> <view class="container"> <!--轮播图组件--> <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <!--遍历imgUrls数组,生成多个swiper-item组件--> <block wx:for="{{imgUrls}}" wx:for-item="item" wx:key="*this"> <swiper-item> <image src="{{item}}" class="swiper-image"/> </swiper-item> </block> </swiper> </view> /* index.wxss */ .container { /*设置容器的高度为100%*/ height: 100%; } .swiper { /*设置轮播图的高度为50%*/ height: 50%; } .swiper-image { /*设置图片的宽度和高度为100%*/ width: 100%; height: 100%; }