uniapp不同型号手机适配

摘要:
Ps:获取手机的高度、宽度和高宽比,并自定义页面模块的高度和间距。

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() */ } })
},

免责声明:文章转载自《uniapp不同型号手机适配》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇cocos creator基础-cc.Node(三)坐标空间转换解决引用Element UI 导致弹出多个message消息提示的问题下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

python 文件操作

读取文件:r,只读不能写,文件不存在报错 #打开文件 file_object=open('log.txt',mode="r", encoding='utf-8')#读取:mode为r,只读不能写,文件不存在,报错 # 读取内容, content=file_object.read() print(content) #关闭文件 file_object....

vue histroy模式去除#页面刷新访问空白原因以及解决办法

开启history模式: 如果不开启的话,路由默认是hash模式,开启这个模式前端的工作也很简单,如下: mode: 'history' //在路由那里配置一下这个 如图标记1所示 https://www.XXXXX.com/data/#/login // => 就替换成 https://www.XXXXX.com/data/login 先用h...

python数据可视化案例——平行坐标系(使用pyecharts或pandas)

平行坐标是可视化高维几何和分析多元数据的常用方法。 为了在n维空间中显示一组点,绘制由n条平行线组成的背景,通常是垂直且等距的。所述的点N 维空间被表示为折线与顶点在平行的轴线; 第i 轴上顶点的位置对应于该点的第i个坐标。 此可视化与时间序列可视化密切相关,除了它应用于轴与时间点不对应的数据,因此没有自然顺序。因此,不同的轴布置可能是有意义的。 一、平...

Oracle中的BLOB和CLOB【转载】

原文地址:http://jelly.iteye.com/blog/65796 一、区别和定义       LONG: 可变长的字符串数据,最长2G,LONG具有VARCHAR2列的特性,可以存储长文本一个表中最多一个LONG列   LONG RAW: 可变长二进制数据,最长2G  CLOB:  字符大对象Clob 用来存储单字节的字符数据   NCLOB:...

Python读取JSON数据操作实例解析

读写 JSON 数据 问题 你想读写 JSON(JavaScript Object Notation) 编码格式的数据。 解决方案 json模块提供给了一种很简单的方式来编码和解码json数据,其中两个主要的函数时json.dumps()和 json.loads() 下面演示如何将一个 Python 数据结构转换为 JSON: import json...

Encrypt Decrypt

encryptstring                 DESCryptoServiceProvider desc = new DESCryptoServiceProvider();                byte[] key = System.Text.Encoding.Unicode.GetBytes(encryptkey);       ...