ps:拿到手机的高度、宽度、高宽比例,自定义页面模块的高度和间距。
主要代码:
<view class="cono" :style="{height:navHeight3+'rpx'}">
</view>
<view class="banner" v-if="navHeight4==370" style="background:url('../../static/img/baindex_370.png') no-repeat ;height: 180px;background-size:750rpx ;">
</view>
<view class="contt" :style="{backgroundImage: 'url(' + imageURL + ')',
'background-repeat':'no-repeat', backgroundSize:'100% 100%',height:''+mobileHeight+'px'}">
</view>
data() {
return {
ff: 0,
heigg: 0,
pH: 0, //窗口高度
pW: 0, //窗口宽度
navHeight5: 0,
navHeight: 0, //元素的所需高度
navHeight2: 0,
navHeight3: 0,
navHeight4: 0,
mobileHeight:40,
imageURL: '../../static/vip/bg000.png',
}
},
onReady() {
let that = this;
uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
success(res) { //成功回调函数
that._data.pH = res.windowHeight //windoHeight为窗口高度,主要使用的是这个
// console.log("=======res.windowHeight=======", res.windowHeight)
// console.log("=======res.windowWidth=======", res.windowWidth)
let xeew = (res.windowHeight / res.windowWidth).toFixed(2)
that.heigg = (res.windowHeight / res.windowWidth).toFixed(2)
// console.log("=======xeew======", xeew)
uni.showToast({
icon: 'none',
title: xeew,
});
if (xeew > 2.15) {
// console.log("===xeew===ff====", 1)
that.ff = 1
that._data.navHeight4 = 270
that._data.navHeight3 = 461 * 1.15 //中部高度
that._data.navHeight2 = 331 * 1.26 //底部高度
that._data.navHeight5 = 40 //底部上边距
} else if (xeew >= 1.79 && xeew < 2.15) {
that._data.navHeight4 = 370
that.ff = 2
// console.log("===xeew===ff====", 2)
that._data.navHeight3 = res.windowHeight / 1.36 //
that._data.navHeight2 = res.windowHeight / 1.56
that._data.navHeight5 = 40
} else if (xeew == 1.78) {
// console.log("===xeew===ff====", 3)
that.ff = 3
that._data.navHeight4 = 170
that._data.navHeight3 = 416 //
that._data.navHeight2 = 305
that._data.navHeight5 = -22
} else if (xeew >= 1.75 && xeew < 1.78) {
that._data.navHeight4 = 370
// console.log("===xeew===ff====", 4)
that.ff = 4
that._data.navHeight3 = res.windowHeight / 1.41 //
that._data.navHeight2 = res.windowHeight / 1.8
that._data.navHeight5 = 40
} else if (xeew >= 1.7 && xeew < 1.75) {
that._data.navHeight4 = 270
// console.log("===xeew===ff====", 5)
that.ff = 5
that._data.navHeight3 = res.windowHeight / 1.31 //
that._data.navHeight2 = res.windowHeight / 1.41
that._data.navHeight5 = 40
} else if (xeew >= 1.44 && xeew < 1.7) {
// console.log("===xeew===ff====", 6)
that.ff = 6
that._data.navHeight4 = 270
that._data.navHeight3 = res.windowHeight / 1.31 //
that._data.navHeight2 = res.windowHeight / 1.46
that._data.navHeight5 = 10
} else {
// console.log("===xeew===ff====", 7)
that.ff = 7
that._data.navHeight4 = 270
that._data.navHeight3 = res.windowHeight / 1.37 //
that._data.navHeight2 = res.windowHeight / 1.59
that._data.navHeight5 = 10
}
/* let titleH = uni.createSelectorQuery().select(".sv"); //想要获取高度的元素名(class/id)
titleH.boundingClientRect(data => {
let pH = that._data.pH;
that._data.navHeight = pH - data.top + 200 //计算高度:元素高度=窗口高度-元素距离顶部的距离(data.top)
}).exec() */
}
})
},