uniapp获取屏幕宽度的方式_Vue.js Uniapp 获取屏幕、元素的高度宽度

在做弹框的时候，如果是从top、bottom出来，会自动填满宽度，但是从center出来，就只是内容大小。怎么样给父级设置宽度也没用。如果设置固定值，就不能做到自适应。尝试过用vue的方法，但是不成功，用微信小程序的方法会在编译的时候报错，虽然运行的时候没问题。

走了很多弯路，才发现其实uniapp有这个接口，隐藏得比较深。其实也有些惯性思维的原因，不应该跨过框架本身的接口去找其他方法。

获取系统信息：

screenWidth 屏幕宽度

screenHeight 屏幕高度

windowWidth 可使用窗口宽度

windowHeight 可使用窗口高度

windowTop 可使用窗口的顶部位置 App、H5

windowBottom 可使用窗口的底部位置 App、H5

statusBarHeight 状态栏的高

uni.getSystemInfo({

success: function (res){

console.log(res.model);

console.log(res.pixelRatio);

console.log(res.windowWidth);

console.log(res.windowHeight);

console.log(res.language);

console.log(res.version);

console.log(res.platform);

}

});

示例

设置弹框宽度为屏幕的80%

export default {

data () {

return {

setWidth: 0

}

mounted () {

this.$refs.setPlan.open()

// 注意，这里要用个变量存this，不然进到getSystemInfo后this指向会变化，找不到data变量

var _this = this

uni.getSystemInfo({

success: function (res){

_this.setWidth = res.windowWidth * 0.8

}

})

注意：计算表达式不能用 80%(会报错)，要用0.8

错：30080%

对： 300

0.8

获取元素的宽度、高度、定位

可以获得如下信息：

bottom:

dataset，如ref

proto:

height:

left:

right:

top:

width:

// uniapp的方法

uni.getSystemInfo({

success: function (res){ // res - 各种参数

let obj = uni.createSelectorQuery().select('.类名')

obj.boundingClientRect(function (data){ // data - 各种参数

console.log(data)

}).exec()

}

})

Exchange blogroll：http://laker.me/blog

uniapp获取屏幕宽度的方式_Vue.js Uniapp 获取屏幕、元素的高度宽度相关推荐

js怎么获取一个元素与屏幕右边的距离_js中如何获取某个元素到浏览器最左和最右的距离...
js中如何获取某个元素到浏览器最左和最右的距离以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! js中获取某个元素到浏览器 ...
vue 获取id元素,vue.js怎么获取dom元素？
vue.js怎么获取dom元素?下面本篇文章给大家介绍一下vue.js获取dom元素的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 使用Vue.js获取dom元素标签中添加 ...
html 获取下一个兄弟节点,js jquery获取当前元素的兄弟级上一个下一个元素
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得 ...
html 获取下一个兄弟节点,JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法...
$(function(){ //遍历获取的input元素对象数组,绑定click事件 var len = $("input[type='file']").length; for(v ...
JS DOM获取标签/元素style样式
JS DOM获取标签/元素style样式文章目录 JS DOM获取标签/元素style样式 .style getComputedStyle() .style 只能获取行内样式,不能获取style标签 ...
js原生获取html的高度,如何通过js获取Html元素的实际宽度高度
如何通过js获取Html元素的实际宽度高度发布时间:2020-04-24 15:23:24 来源:亿速云阅读:136 作者:小新今天小编给大家分享的是如何通过js获取Html元素的实际宽度高度, ...
html jq固定div高度,js/jQuery获取/设置div的高度，宽度···
js/jQuery获取/设置html标签的高度等css属性· $(".out-div").height($(window).height() - $("#topDiv&q ...
JS如何获取屏幕、浏览器及网页高度宽度？
目的在浏览器中,用JS获取高度和宽度都各有3种,分别包括屏幕,浏览器和网页的.用来解决各种计算定位问题!以至于我各种记不住,写个随笔方便查询. 屏幕宽高说明:顾名思义,屏幕宽高是指显示器的分辨率. ...
[转载] js 下获取子元素的方法 -- 李富生
地址:https://www.cnblogs.com/web-fusheng/p/6816440.html firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChi ...
js 下获取子元素的方法
笔记核心: firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChild则可以获取文本节点对象(当然也可以获取元素节点对象),比如空格和换行都被当做文本节点. js ...

uniapp获取屏幕宽度的方式_Vue.js Uniapp 获取屏幕、元素的高度宽度

uniapp获取屏幕宽度的方式_Vue.js Uniapp 获取屏幕、元素的高度宽度相关推荐

最新文章

热门文章