uni.createSelectorQuery()
需要在生命周期 mounted 后进行调用
返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点,并使用 boundingClientRect 等方法选择需要查询的信息。
// util.js
// 封装获取dom的方法并导出使用
export function warpRectDom(idName) {
return new Promise(resolve => {
setTimeout(() => { // 延时确保dom已渲染, 不使用$nextclick
let query = uni.createSelectorQuery();
// #ifndef MP-ALIPAY
query = query.in(this) // 支付宝小程序不支持in(this),而字节跳动小程序必须写in(this), 否则都取不到值
// #endif
query.select('#' + idName).boundingClientRect(data => {
resolve(data)
}).exec();
}, 20)
})
}
导入到vue的文件中使用
<template>
<view class="container" id="contId">
内容文本
</view>
</template>
<script>
import { warpRectDom } from '@/utils/auth.js';
export default {
data() {
return {}
},
async onReady() {
const contRes = await this.warpRectDom('contId');
// navBgRes.height
// id String 节点的 ID
// dataset Object 节点的 dataset
// left Number 节点的左边界坐标
// right Number 节点的右边界坐标
// top Number 节点的上边界坐标
// bottom Number 节点的下边界坐标
// width Number 节点的宽度
// height Number 节点的高度
// 如果元素未获取到,使用nextTick去延迟获取dom即可
this.$nextTick(async () => {
const contRes = await this.warpRectDom('contId');
});
},
methods: {
warpRectDom,
},
}
</script>
uni.createIntersectionObserver([this], [options])
用于监听俩个区域相交可见的事件使用
节点布局交叉状态 API 可用于监听两个或多个组件节点在布局位置上的相交状态;
应用: 可用于可设区域的呈现监听埋点,或与触底的事件相结合使用(减少使用scroll的计算,减少损耗)
<template>
<view class="container">
<text>{{appear ? '小球出现' : '小球消失'}}</text>
<view class="page-section">
<scroll-view class="scroll-view" scroll-y>
<view class="scroll-area">
<text class="notice">向下滚动让小球出现</text>
<view class="ball"></view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
let observer = null;
export default {
data() {
return {
appear: false
}
},
onReady() {
observer = uni.createIntersectionObserver(this);
observer.relativeTo('.scroll-view').observe('.ball', (res) => {
if (res.intersectionRatio > 0 && !this.appear) {
this.appear = true;
} else if (!res.intersectionRatio > 0 && this.appear) {
this.appear = false;
}
})
},
onUnload() {
if (observer) {
observer.disconnect()
}
}
}
</script>
<style>
view,page {
display: flex;
flex-direction: column;
}
.scroll-view {
height: 400rpx;
background: #fff;
border: 1px solid #ccc;
box-sizing: border-box;
}
.scroll-area {
height: 1300rpx;
display: flex;
flex-direction: column;
align-items: center;
transition: .5s;
}
.notice {
margin-top: 150rpx;
margin: 150rpx 0 400rpx 0;
}
.ball {
width: 200rpx;
height: 200rpx;
background: #1AAD19;
border-radius: 50%;
}
</style>