微信小程式使用Swiper組件構建輪播圖

新建目錄 posts （閱讀頁面）

點擊目錄右鍵新建page

目錄結構如下：

在app.json中，把posts調整為預設顯示的頁面（暫時先這樣，具體的多頁面之後再說）

{
  "pages": [
    "pages/posts/posts",
    "pages/welcome/welcome"
    
  ],
  "window": {
    "navigationBarBackgroundColor": "#405f80"
  },
  "sitemapLocation": "sitemap.json"
}

官方文檔里找到swiper組件

posts.wxml

<!--pages/posts/posts.wxml-->
<view>
  <swiper indicator-dots="true" interval="2000" autoplay="true">
    <swiper-item><image src="/images/wx.png"></image></swiper-item>
    <swiper-item><image src="/images/vr.png"></image></swiper-item>
    <swiper-item><image src="/images/iqiyi.png"></image></swiper-item>
  </swiper>  
</view>

posts.wxss

註意輪播圖的尺寸取決於swiper容器的尺寸，而不是swiper-item的尺寸

/* pages/posts/posts.wxss */
swiper{
  width:100%;
  height:500rpx;
}
swiper image{
  width:100%;
  height:500rpx;
}

效果圖：