فهرست منبع

:bug: 解决页面元素重复导致程序假死bug

zhanghe 6 سال پیش
والد
کامیت
9a10966e5d
2فایلهای تغییر یافته به همراه32 افزوده شده و 16 حذف شده
  1. 1 1
      src/stage/index/index.html
  2. 31 15
      src/stage/index/scene/WaterFallIndexScene.js

+ 1 - 1
src/stage/index/index.html

@@ -54,7 +54,7 @@
 	<script src="../../lib/js/TVUtil.min.js"></script>
 	<script src="../../lib/js/swiper.min.js"></script>
 	<script>
-		var ts = '201806191045';
+		var ts = '201807071350';
 
 		var appCss = document.createElement('link');
 		appCss.rel = 'stylesheet';

+ 31 - 15
src/stage/index/scene/WaterFallIndexScene.js

@@ -78,14 +78,19 @@ class WaterfallIndexScene extends scene {
         let container = document.getElementById('advert-carousel');
         container.innerHTML = swiperHTML;
         // 创建swiper对象
-        this.advertSwiper = new Swiper('.swiper-container-advert', {
-            direction: 'horizontal',
-            autoplay: true,
-            pagination: {
-                el: '.swiper-pagination-advert',
-                bulletElement: 'li',
-            },
-        });
+        if (!this.advertSwiper) {
+            this.advertSwiper = new Swiper('.swiper-container-advert', {
+                direction: 'horizontal',
+                autoplay: true,
+                pagination: {
+                    el: '.swiper-pagination-advert',
+                    bulletElement: 'li',
+                },
+            });
+        // 更新swiper对象
+        } else {
+            this.advertSwiper.updateSlides();
+        }
         this.moye.root.reRender();
     }
 
@@ -204,6 +209,12 @@ class WaterfallIndexScene extends scene {
         });
         /* 将sliders插入到页面dom中 */
         let swiperContainer = document.getElementById('waterfall-swiper');
+        /* 销毁除slide-0以外的全部slider, 防止页面元素重复 */
+        let sliderFirst = document.getElementById('slide-0');
+        if (swiperContainer && sliderFirst) {
+            swiperContainer.innerHTML = '';
+            swiperContainer.appendChild(sliderFirst);
+        }
         sliders.forEach((slider, sliderIndex) => {
             let slideDom = document.createElement('div');
             slideDom.setAttribute('class', 'swiper-slide');
@@ -217,13 +228,18 @@ class WaterfallIndexScene extends scene {
             swiperContainer.appendChild(slideDom);
         });
         /* 注册swiper */
-        this.waterfallSwiper = new Swiper('.swiper-container-waterfall', {
-            direction: 'vertical',
-            pagination: {
-                el: '.swiper-pagination-waterfall',
-                bulletElement: 'li',
-            },
-        });
+        if (!this.waterfallSwiper) {
+            this.waterfallSwiper = new Swiper('.swiper-container-waterfall', {
+                direction: 'vertical',
+                pagination: {
+                    el: '.swiper-pagination-waterfall',
+                    bulletElement: 'li',
+                },
+            });
+        /* 更新swiper */
+        } else {
+            this.waterfallSwiper.updateSlides();
+        }
         /* 重新渲染下,使新构造的swiper生效 */
         this.moye.root.reRender();
     }