懒加载更多

src/App.vue

@@ -1,13 +1,11 @@
 <template>
   <el-config-provider :locale="locale">
-    <el-scrollbar height="100vh" always wrap-class="scorll" @scroll="scroll">
-      <div id="nav" ref="nav" class="lingdu_main">
-        <!-- <router-link to="/">栏目</router-link> |
+    <div id="nav" class="lingdu_main">
+      <!-- <router-link to="/">栏目</router-link> |
       <router-link to="/channel">频道</router-link> |
       <router-link to="/realData">直播数据</router-link> -->
-        <router-view />
-      </div>
-    </el-scrollbar>
+      <router-view />
+    </div>
   </el-config-provider>
 </template>
 <script>
@@ -20,14 +18,7 @@ export default {
       locale,
     };
   },
-  methods: {
-    scroll(scroll) {
-      let allheight = this.$refs.nav.offsetHeight - document.body.offsetHeight;
-      let warn = allheight - scroll.scrollTop;
-      if (warn > 10) return;
-      console.log("--", warn, this);
-    },
-  },
+  methods: {},
   components: {},
 };
 </script>

src/views/BoutiqueColumn/BoutiqueColumn.vue

@@ -1,31 +1,33 @@
 <template>
-  <div class="boutiqueColumn">
-    <el-breadcrumb separator-class="el-icon-arrow-right">
-      <el-breadcrumb-item>传统媒体</el-breadcrumb-item>
-      <el-breadcrumb-item>重点栏目分析</el-breadcrumb-item>
-    </el-breadcrumb>
-    <el-loading></el-loading>
-    <el-tabs
-      tab-position="top"
-      style="max-height: 100%;"
-      @tab-click="selectTab"
-      v-model="select"
-    >
-      <el-tab-pane
-        v-for="(item, i) in columnNames"
-        :key="i"
-        :label="item.programName"
-        :name="item.component"
+  <el-scrollbar height="100vh" always wrap-class="scorll" @scroll="scroll">
+    <div class="boutiqueColumn"  ref="nav">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item>传统媒体</el-breadcrumb-item>
+        <el-breadcrumb-item>重点栏目分析</el-breadcrumb-item>
+      </el-breadcrumb>
+      <el-loading></el-loading>
+      <el-tabs
+        tab-position="top"
+        style="max-height: 100%;"
+        @tab-click="selectTab"
+        v-model="select"
       >
-        <div
-          class="tab-body"
-          v-if="item.component === select || selectA[item.component]"
+        <el-tab-pane
+          v-for="(item, i) in columnNames"
+          :key="i"
+          :label="item.programName"
+          :name="item.component"
         >
-          <component :is="item.component" :item="item"></component>
-        </div>
-      </el-tab-pane>
-    </el-tabs>
-  </div>
+          <div
+            class="tab-body"
+            v-if="item.component === select || selectA[item.component]"
+          >
+            <component :is="item.component" ref="child" :item="item"></component>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </el-scrollbar>
 </template>
 
 <script>
@@ -57,6 +59,12 @@ export default {
   },
   computed: {},
   methods: {
+    scroll(scroll) {
+      let allheight = this.$refs.nav.offsetHeight - document.body.offsetHeight;
+      let warn = allheight - scroll.scrollTop;
+      if (warn > 10) return;
+      this.$refs.child.changePage()
+    },
     selectTab(tab) {
       try {
         this.select = this.columnNames[tab.index].component;
@@ -86,8 +94,8 @@ export default {
 .tab-body {
   padding-bottom: 20px;
 }
-.export{
-    float: right!important;
-    margin: 10px;
+.export {
+  float: right !important;
+  margin: 10px;
 }
 </style>

src/views/BoutiqueColumn/views/dialogueSecretary.vue

@@ -129,7 +129,7 @@ export default {
   methods: {
     changePage() {
       //   this.current = newPage;
-      if (this.load) return;
+      if (this.load || this.total <= this.current*this.size) return;
       this.current++;
       this.load = true;
       const p = {

src/views/BoutiqueColumn/views/huashanlunjian.vue

@@ -130,7 +130,7 @@ export default {
   methods: {
     changePage() {
       //   this.current = newPage;
-      if (this.load) return;
+      if (this.load || this.total <= this.current*this.size) return;
       this.current++;
       this.load = true;
       const p = {

src/views/BoutiqueColumn/views/hundredBrokenPlays.vue

@@ -130,7 +130,7 @@ export default {
   methods: {
     changePage() {
       //   this.current = newPage;
-      if (this.load) return;
+      if (this.load || this.total <= this.current*this.size) return;
       this.current++;
       this.load = true;
       const p = {

src/views/BoutiqueColumn/views/policeStory.vue

@@ -129,7 +129,7 @@ export default {
   methods: {
     changePage() {
       //   this.current = newPage;
-      if (this.load) return;
+      if (this.load || this.total <= this.current*this.size) return;
       this.current++;
       this.load = true;
       const p = {

src/views/BoutiqueColumn/views/shaanxiNewsSimulcast.vue

@@ -129,7 +129,7 @@ export default {
   methods: {
     changePage() {
       //   this.current = newPage;
-      if (this.load) return;
+      if (this.load || this.total <= this.current*this.size) return;
       this.current++;
       this.load = true;
       const p = {

src/views/BoutiqueColumn/views/urbanExpressNews.vue

@@ -129,7 +129,7 @@ export default {
   methods: {
     changePage() {
       //   this.current = newPage;
-      if (this.load) return;
+      if (this.load || this.total <= this.current*this.size) return;
       this.current++;
       this.load = true;
       const p = {