修改神秘贵州展厅vr为滚动到视图时自动加载，手动关闭滚动时则不再继续加载

src/views/boutique/components/SMGZ.vue

@@ -210,6 +210,7 @@
           </div> -->
           <div
             class="guide-content-vr wow animate__animated animate__fadeInRight"
+            id="vr-auto"
           >
             <div
               class="vr-container"
@@ -427,6 +428,7 @@ export default {
       src: "",
       showVrIFrame: false,
       vrIFrameLoaded: false, //vr iframe加载是否完毕
+      isVrLoaded: false, //是否要加载vr iframe
     };
   },
   computed: {
@@ -435,11 +437,20 @@ export default {
     },
   },
 
+  mounted() {
+    this.$nextTick(() => {
+      // this.scroll();
+      window.addEventListener("scroll", this.scroll);
+    });
+  },
+  destroyed() {
+    window.removeEventListener("scroll", this.scroll, false);
+  },
   methods: {
     handleChangeUnit(item) {
       this.curentUnitPicIndex = item.index;
       this.$refs.mySwiper.swiper.realIndex = 0;
-      console.log('this.$refs.mySwiper.',this.$refs.mySwiper.swiper);
+      console.log("this.$refs.mySwiper.", this.$refs.mySwiper.swiper);
       // this.$refs.mySwiper.swiper.slideTo(0)
     },
     handleChangeCr(item) {
@@ -456,12 +467,10 @@ export default {
 
         if (iframe && iframe.attachEvent) {
           iframe.attachEvent("onload", function () {
-            console.log("iframe已加载完毕");
             _this.vrIFrameLoaded = true;
           });
         } else {
           iframe.onload = function () {
-            console.log("iframe已加载完毕");
             _this.vrIFrameLoaded = true;
           };
         }
@@ -509,6 +518,29 @@ export default {
         window.open(newPage.href, "_blank");
       }
     },
+
+    async scroll() {
+      let el = document.querySelector("#vr-auto");
+      let isInViewPort = this.isInViewPort(el);
+      if (isInViewPort && !this.isVrLoaded) {
+        this.handleChangeToVR();
+        this.isVrLoaded = true;
+      } else {
+        
+      }
+    },
+
+    isInViewPort(element) {
+      const viewWidth =
+        window.innerWidth || document.documentElement.clientWidth;
+      const viewHeight =
+        window.innerHeight || document.documentElement.clientHeight;
+      const { top, right, bottom, left } = element.getBoundingClientRect();
+
+      return (
+        top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight
+      );
+    },
   },
 };
 </script>