uniapp不同型号手机适配

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() */ } })
},
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gh786395613

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值