vue2模块懒加载

2023-12-21 13:34:35

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))

????????????????????????}

????????????????});

???????????},

}

文章来源:https://blog.csdn.net/xue_sunshine_girl1/article/details/135127110
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。