动态渲染scroll-view 滚动区域高度

1、 

 

// 获取scroll-view 滚动区域高度
/**
 * DOM节点的class
 * 必须在DOM挂后后调用此方法
 * @param {type} domArray
 * @return {type}
 * @event {Function()} callback 
 */
export const getScrollViewHeight = function getScrollViewHeight(domArray,callback) {
	const {
		windowHeight
	} = uni.getSystemInfoSync();
	let navBarHeight = 44 // navBar 高度
	let initHeight = 0
	let result = 0
    // 如果页面上没有其他元素，只需要传一个空数组[]，减掉navBar就行
	if (!domArray.length) {
		result = windowHeight - navBarHeight
		callback(result)
		return
	}
	uni.getSystemInfo({
		success: function(res) {
			for (var i = 0; i < domArray.length; i++) {
				uni.createSelectorQuery().select(`${domArray[i]}`).boundingClientRect(function(data) {
					if (data && data.height) {
						initHeight+= data.height; // 获取元素宽度
					}
				})
				.exec();
			}
			result = windowHeight - initHeight - navBarHeight
			callback(result) 
		},
	});
}

 

 

mian.js中

Vue.prototype.$getScrollViewHeight = getScrollViewHeight

this.$getScrollViewHeight(['.box1'], (res) => {
				this.viewRefHeight = res + 'px'
			})

如果页面上没有其他元素，只需要传一个空数组

this.$getScrollViewHeight([], (res) => {
				this.viewRefHeight = res + 'px'
			})