data() {
????????return {
????????????????observer: null,
?????????????????stopObserverData:[]
????????};
},
mounted(){
????????const observerCallback = (entries) => {
????????????????entries.forEach(entry => {
????????????????????????if (entry.intersectionRatio > 0) { // 被观察者进入视口
? ? ????????????????????????this.getData(entry.target.id);
????????????????????????}
????????????????});
????????}
????????this.observer = new IntersectionObserver(observerCallback)
????????data.map(item => {
????????????????this.observer.observe(document.getElementById(item.id))
????????})
}
methods:{
????????getData(id){
????????????????return new Promise(async (resolve, reject) => {
????????????????????????if (id) {
????????????????????????????????if (this.$refs[`ref-${id}`]) {
????????????????????????????????????????await this.$refs[`ref-${id}`][0]?.init();
????????????????????????????????????????this.stopObserverData.push(id)
????????????????????????????????}
????????????????????????????????resolve(true);
????????????????????????} else {
????????????????????????????????resolve(false);
????????????????????????}
????????????????}).then((res) => {
????????????????????????if (res) {
????????????????????????????????this.observer.unobserve(document.getElementById(id))
????????????????????????}
????????????????});
???????????},
}