产业园区无限滚动

nngkxxdp/src/main/resources/static/naxsb/cytz.html

@@ -180,6 +180,11 @@
     }
 
     .tdgy {
+      padding: 0 20px;
+      width: 100%;
+      overflow: hidden;
+    }
+    .tdgyC {
       display: flex;
       flex-wrap: wrap;
       padding: 0 20px;
@@ -192,17 +197,18 @@
     }
 
     .ztfw {
-      display: flex;
-      flex-wrap: wrap;
       padding: 0 20px;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+    .ztfwC {
       width: 100%;
       overflow-y: auto;
       -ms-overflow-style: none;
-      scrollbar-width: none;
-      box-sizing: border-box;
-      position: relative;
+      scrollbar-width: none;      
+      display: flex;
+      flex-wrap: wrap;
     }
-
     .tdgyList {
       display: flex;
       border-bottom: 1px solid rgba(245, 250, 255, .2);
@@ -213,8 +219,6 @@
       white-space: nowrap;
       width: 100%;
       position: relative;
-      -webkit-animation: 40s rowup linear infinite normal;
-      animation: 40s rowup linear infinite normal;
     }
 
     .tdgyList:last-child {
@@ -250,8 +254,6 @@
       white-space: nowrap;
       width: 100%;
       position: relative;
-      -webkit-animation: 20s rowupzt linear infinite normal;
-      animation: 20s rowupzt linear infinite normal;
       cursor: pointer;
     }
 
@@ -544,6 +546,7 @@
               <span class="more" @click="golink('tdcrlist.html?id=-1',1)">更多>></span>
             </div>
             <div class="tdgy">
+              <div class="tdgyC">
               <div :data="contentList" class="tdgyList" v-for="(tab, index)  in this.contentList"
                 @click="golink('tdcr.html?tdid=' + tab.id)" :key="index">
                 <img src="image/listcricle.png" />
@@ -554,6 +557,7 @@
                 </div>
               </div>
             </div>
+            </div>
           </div>
           <div class="contentItem" style="background:url(image/ztfwbg.png) no-repeat;background-size: 100% 100%;">
             <div class="title">
@@ -561,6 +565,7 @@
               <span class="more" @click="golink('ztcrlist.html?id=-1',2)">更多>></span>
             </div>
             <div class="ztfw">
+              <div class="ztfwC">
               <div class="ztfwList" v-for="(tab, index)  in this.buildList"
                 @click="golink('ztcrdetail.html?ztid=' + tab.id)" :key="index">
                 <img src="image/listcricle.png" />
@@ -570,6 +575,7 @@
                 </div>
               </div>
             </div>
+            </div>
           </div>
           <div class="contentItem" style="background:url(image/yqfwbg.png) no-repeat;background-size: 100% 100%;">
             <div class="title">
@@ -660,17 +666,13 @@
         return points;
       },
       addKey(y) {
-        var style = document.createElement('style');
-        style.type = 'text/css';
-        var keyFrames = '\
-    @keyframes rowup {\
-        100% {\
-            -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
-            top: -A_DYNAMIC_VALUEpx;\
-        }\
-    }';
-        style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y);
-        document.getElementsByClassName('ztfw')[0].appendChild(style);
+        console.log(y);
+        let i = 0
+        setInterval(function () {
+          if (i >= y) return i = 0
+          i++
+          document.querySelector('.ztfwC').style.marginTop = `-${i}px`
+        }, 50);
       },
       loadAllMap() {
         var that = this;
@@ -847,25 +849,22 @@
             that.buildList = dataList;
           }
         });
-        var height = document.querySelector('.tdgyList').clientHeight;
+        var height = document.querySelector('.tdgyList')?document.querySelector('.tdgyList').clientHeight:0;
         console.log(height);
-        this.addKeyFrames('-' + height * this.contentList.length + 'px');
-        var height1 = document.querySelector('.ztfwList').clientHeight;
+        if(this.contentList.length){
+        this.addKeyFrames(height * this.contentList.length);}
+        var height1 = document.querySelector('.ztfwList').clientHeight?document.querySelector('.ztfwList'):0;
         console.log(height1);
-        this.addKey('-' + height1 * this.buildList.length + 'px');
+        if(this.buildList.length){this.addKey(height1 * this.buildList.length);}
       },
       addKeyFrames(y) {
-        var style = document.createElement('style');
-        style.type = 'text/css';
-        var keyFrames = '\
-    @keyframes rowupzt {\
-        100% {\
-            -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
-            top: -A_DYNAMIC_VALUEpx;\
-        }\
-    }';
-        style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y);
-        document.getElementsByClassName('tdgy')[0].appendChild(style);
+        console.log(y);
+        let i = 0
+        setInterval(function () {
+          if (i >= y) return i = 0
+          i++
+          document.querySelector('.tdgyC').style.marginTop = `-${i}px`
+        }, 50);
       }
     }
   });