生态修复滚动效果

src/views/cockpit/stxf.vue

@@ -24,7 +24,7 @@
     <div v-show="tab == options[1].value">
       <div class="content">
 
-        <div class="infoLIst" v-if="store.state.cockpit_stxf.ssgc.list.length">
+        <div class="infoLIst content" v-if="store.state.cockpit_stxf.ssgc.list.length" ref="contentRef">
           <div class="infoItem" v-for="(item, index) in store.state.cockpit_stxf.ssgc.list" :key="index">
             <div class="itemIcon">
               <span>
@@ -56,12 +56,12 @@ export default {
   components: { borderTemplate, pie3d },
   data() {
     return {
-      jiDataInfo: [], //集体信息列表
+      timer: undefined,
       options: [
         { value: "tdzz", label: "土地整治" },
         { value: "ssxf", label: "山水工程" },
       ],
-      tab: "tdzz",
+      tab: "ssxf",
       paramdatas: {},
       sdlist: {
         tdzz: [
@@ -184,6 +184,31 @@ export default {
       this.$refs.stxf_echart_tdzz.setOptions(arr);
 
     },
+    initDiv() {
+      const self = this
+      const setInter = function () {
+        if (self.$refs.contentRef.scrollTop > 1233) {
+          self.$refs.contentRef.scrollTop = 0
+
+        }
+
+        if (self.$refs.contentRef.scrollTop === self.$refs.contentRef.scrollHeight - self.$refs.contentRef.clientHeight) {
+          self.$refs.contentRef.scrollTop = 0
+        } else {
+          self.$refs.contentRef.scrollTop++
+        }
+
+      }
+      self.timer && clearInterval(self.timer)
+      self.timer = setInterval(setInter, 100)
+
+      this.$refs.contentRef.addEventListener('mouseover', function () {
+        self.timer && clearInterval(self.timer)
+      })
+      this.$refs.contentRef.addEventListener('mouseout', function () {
+        self.timer = setInterval(setInter, 100)
+      })
+    }
   },
   mounted() {
     this.$nextTick((res) => {
@@ -191,13 +216,15 @@ export default {
 
       this.getInfo();
       this.tdzz();
-
+      this.initDiv()
 
     })
   },
 };
 </script>
 <style lang="scss" scoped>
+//  
+
 .stxf {
   top: 33.3% !important;