- <view id="detailInfoRef" ref="detailInfoRef" class="detailInfo">
- <view id="htmlRef" class="detailInfo-box">
- {{text}}
- </view>
- </view>
父级,detailInfoRef;子级:htmlRef,要求,根据两个元素的宽高走不同的样式或者逻辑
父级定义好高度,子级内容撑开
方法:
一定要给对应的元素设置id,使用uni.createSelectorQuery().in(this).select('#id名') 获取对应元素
在使用 : 目标变量.boundingClientRect(data => {
执行各种赋值或者方法
}).exec()
注意:
1,这里的方法中的回调函数有这个元素的所有属性,包括宽高等等
2,一定要再this.$nextTick(() => {}执行这个方法,因为最初的时候是没有宽高的,没办法动态获取,获取频率比较高的可以用计时器
let obj= uni.createSelectorQuery().in(this).select('#detailInfoRef')
obj.boundingClientRect(data => {
执行各种赋值或者方法)
}).exec()
- methods: {
- hasScrollbar() {
- this.$nextTick(() => {
- let viewDetail = uni.createSelectorQuery().in(this).select('#detailInfoRef')
- viewDetail.boundingClientRect(data => {
- this.detailHeight = data.height
- console.log("detailHeight" + data.height)
- }).exec()
- let viewHtml = uni.createSelectorQuery().in(this).select('#htmlRef')
- viewHtml.boundingClientRect(data => {
- this.htmlHeight = data.height
- console.log("htmlHeight" + data.height)
- }).exec()
- setTimeout(()=>{
- if (this.htmlHeight > this.detailHeight) {
- this.know = false
- 执行方法1
- } else {
- this.know = true
- 执行方法2
- }
- },100)
- })
- },
- }
最后拿到元素的高度最对比就好了