高仿瑞幸小程序 05 更正轮播组件的高度计算

今天我们要做一个修正，同时讲一个知识点。



首先是一个知识点，当我们在小程序中使用rpx单位的时候，屏幕的宽度都为750rpx。我们通过wx.getSystemInfoSync().windowWidth获得的是px为单位的屏幕宽度。如果涉及到需要使用屏幕宽度来计算尺寸，请使用750，因为我们在小程序中，使用的单位是rpx。



现在，我们来重新计算轮播图的高度。



之前，我们把高度的计算直接写在了wxml中，现在我们把它剥离出来，同时用变量swiperHeight做为高度的绑定。如下：



style="margin-top:{{(titleBarHeight + statusBarHeight)}}rpx;height:{{swiperHeight}}rpx;"



于是，我们的精力将集中在swiperHeight的计算上。



首先，我们需要在data中声明swiperHeight



data: {

    swiperHeight:0,

......



接着，我们来计算swiperHeight，而我们之前推导过高度的计算，还记得吗？如下：



轮播组件的高度 = (wx.getSystemInfo().windowWidth - 40)*540/1065



现在我们知道了，不该使用wx.getSystemInfo().windowWidth，而该直接使用750.所以我们的计算公式就该改为如下：



const winWidth = 750

const swiperHeight = (winWidth - 40 ) * 540/1065



计算完后，别忘了使用setData更新swiperHeight的值。这下，轮播图的显示终于完美。 



为了让swiper 和image组件在不同的屏幕下都能撑满，最好给它们都加上如下样式

style=“width:100%;height:100%"



最后，放上代码的github地址

https://github.com/gogoswift/luckin