一、首頁輪播圖的主要功能點

1.使用swiper和swiper-item元件

2.動態獲取後臺的輪播圖照片

3.改變小程式預設的swiper顯示高度

二、首頁輪播圖的程式碼

1.home.wxml

1 <!-- 首頁輪播圖 -->
2 <swiper indicator-dots="true" indicator-color="rgba(0, 0, 0, .3)" autoplay="true" circular="true" style='height:{{bannerHeight}}'>
3 <swiper-item wx:for="{{bannerList}}"
 
 >
4 <image src="{{item.picUrl}}"  mode="widthFix" bindload="imageLoad" ></image>
5 </swiper-item>
6 </swiper>

2.home.wxss

1 swiper image{
2   width: 100%;
3 }

3.home.js

Page({

  //頁面的初始資料

  data: {
    //自定義陣列，存放banner顯示在頁面上
    bannerList:[],
    //所有banner圖片的高度
    bannerHeight: '',
  },

  onLoad: 
 
function (options) {
    //獲取輪播圖
    wx.cloud.database().collection("lunbotu")
    .get()
    .then(res=>{
      console.log("獲取輪播圖成功",res);
      this.setData({
        bannerList:res.data
      })
    })
    .catch(err=>{
      console.log("獲取輪播圖失敗",err);
    })
  },

  //設定swiper的高度
  imageLoad(e){
    
 
//獲取當前螢幕的寬度
    let screenWidth = wx.getSystemInfoSync().windowWidth;
    console.log("獲取圖片的真實寬度",e.detail.width);
    console.log("獲取圖片的真實高度",e.detail.height);
    let imgWidth = e.detail.width //圖片的真實寬度
    let imgHeight = e.detail.height //圖片的真實高度
    //等比設定swiper的高度
    let swiperHeight = (screenWidth/imgWidth)*imgHeight+ "px"
    this.setData({
      bannerHeight:swiperHeight
    })
  },

})

三、首頁輪播圖的效果