投稿
  1. HTTP3W博客首页
  2. 技术
  3. vue

uniapp设备屏幕高度适配

诺米 • • vue • 阅读 2166

1、获取设备屏幕可用总高度

uni.getSystemInfo({
    success: function (res) {
		var windowHeight= res.windowHeight;				
    }
});

2、绑定计算属性

computed: {		   
    scrollerHeight: function() {					
		return this.scrollHeight+'px';
    }	
},

首先注意，不能绑定data属性，要绑定计算属性；scrollHeight代表多个变量计算后的最终结果，由computed监控。

computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；

computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

3、使用

:style="{height:scrollerHeight}

案例：简单实现过程

export default {
		data() {
			return {
				vHeight:41,
				vtop:20
			}
		},
		created() {
			let this_ = this;
			uni.getSystemInfo({
			    success: function (res) {
					var windowHeight= res.windowHeight;			
					if(windowHeight > 736){
						this_.vHeight = 50;
						this_.vtop = 50;
					}else{
						this_.vtop = 20;
						this_.vHeight = 41;
					}
			    }
			});

		  this.wxqrcode();
		},
<image class="canvas"  :src="qcCode" :style="{'bottom':vHeight+'%'}  "></image>

1、原创文章，作者：诺米，如若转载，请注明出处：https://www.http3w.com/archives/688

2、本站内容若有雷同从属巧合，若侵犯了您的权益，请联系本站删除，E-mail: wtao219@qq.com

赞 (3)
诺米诺米
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022年4月5日 am11:46
下一篇 2022年4月10日 pm1:15

相关推荐

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

记住昵称、邮箱和网址，下次评论免输入