项目实战-点餐小程序-12 首页-轮播图

1.使用swiper和swiper-item组件

2.动态获取后台的轮播图照片

3.改变小程序默认的swiper显示高度

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>

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

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
    })
  },

})