uni-app 动态获取元素高度等
作者:互联网
vue中获取DOM高度,通过ref。如下:
/**
* @description 计算表格高度
*/
setTabelHeight() {
this.$nextTick(() => {
let supPX = 1;
let containerHeight =
this.$refs.containerRef.offsetHeight -
this.getDomStyle(this.$refs.containerRef, "paddingTop") -
this.getDomStyle(this.$refs.containerRef, "paddingBottom");
let headerHeight = this.$refs.headerRef.$el.offsetHeight;
let searchHeight =
this.$refs.searchRef.$el.offsetHeight +
this.getDomStyle(this.$refs.searchRef.$el, "marginTop");
let searchBtnHeight =
this.$refs.searchBtnRef.$el.offsetHeight +
this.getDomStyle(this.$refs.searchBtnRef.$el, "marginTop");
let addBtnHeight =
this.$refs.addBtnRef.$el.offsetHeight +
this.getDomStyle(this.$refs.addBtnRef.$el, "marginTop");
let paginHeight =
this.$refs.paginRef.$el.offsetHeight +
this.getDomStyle(this.$refs.paginRef.$el, "marginTop");
this.tableMaxHeight =
containerHeight -
headerHeight -
searchHeight -
searchBtnHeight -
addBtnHeight -
paginHeight -
this.getDomStyle(this.$refs.tableRef.$el, "marginTop") -
supPX;
});
},
/**
* @description 获取元素样式
* @param {Node} dom dom元素
* @param {String} attr 元素属性
*/
getDomStyle(dom, attr) {
var computedStyle = getComputedStyle(dom, null);
return Number(computedStyle[attr].replace("px", ""));
},
uni-app 动态获取元素高度 如下:
需要通过官方的一个调用方法。
<view :class="{'sucktheTop':true,'sticky-fixed':isF}">
mounted() {
let _this = this;
uni.getSystemInfo({
success: function(res) { // res - 各种参数
console.log(res.windowWidth); // 屏幕的宽度
let info = uni.createSelectorQuery().select(".sucktheTop");
info.boundingClientRect(function(data) { //data - 各种参数
console.log(data) // 获取元素宽度
_this.domHeight = data.height;
}).exec()
}
});
},
标签:el,app,获取,let,getDomStyle,offsetHeight,uni,marginTop,refs 来源: https://blog.csdn.net/lyxkgc/article/details/120345415