首页

src/components/IndexList.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="PersonafFollow">
-    <div class="center">舆论之于司法利大于弊还是弊大于利？</div>
+    <div class="center">{{title}}</div>
     <div class="answer">
       <div class="content">
-        <img class="img" src alt srcset />
-        <p>这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明</p>
+        <img v-if="img == ''?false : true " class="img" :src="'http://lawpro.earnest.pro' + img" alt srcset />
+        <p>{{text}}</p>
       </div>
       <div class="operation">
         <div>
@@ -13,9 +13,9 @@
         </div>
         <div>
           <img src="../assets/share.png" alt srcset />
-          888评论
+          {{num}}评论
         </div>
-        <div class="more" @click="show = !show">
+        <div v-show="false" class="more" @click="show = !show">
           <div></div>
           <div></div>
           <div></div>
@@ -178,6 +178,7 @@ export default {
     return {
       show:false
     };
-  }
+  },
+  props:["title",'id','img','text','num']
 };
 </script>

src/index.vue

@@ -2,9 +2,18 @@
   <div class="box">
     <heads></heads>
     <div class="list">
-      <list></list>
-      <list></list>
-      <list></list>
+      <list
+        v-for="(item,index) in list"
+        :key="index"
+        :title="item.title"
+        :id="item.id"
+        :num="item.comment"
+        :img="item.img"
+        :text="item.text"
+      ></list>
+      <div style="width:100%;height:0.5rem;text-align:center;line-height:0.3rem">{{text}}</div>
+      <!-- <list></list>
+      <list></list>-->
     </div>
   </div>
 </template>
@@ -22,19 +31,70 @@
 </style>
 <script>
 import list from "./components/IndexList";
-import heads from "./components/indexhead"
+import heads from "./components/indexhead";
 export default {
   name: "index",
   data() {
-    return {};
+    return {
+      list: [],
+      page: 1,
+      lock:false,
+      text:"加载中"
+    };
+  },
+  methods: {
+    getlist(){
+      if(this.lock){
+        return 'lock'
+      }
+      this.lock = true
+      var t = this
+      this.page += 1;
+      this.axios
+      .post("http://lawpro.earnest.pro/api/login_main/articleList", {
+        page: t.page
+      })
+      .then(res => {
+        if (res.data.code == 200) {
+           t.list = t.list.concat(res.data.data);
+        t.lock = false
+        }else{
+          t.text = "暂无更多"
+        }
+       
+      })
+    }
   },
-  methods: {},
   components: {
     list,
     heads
   },
-  mounted(){
-    this.axios.get("")
+  mounted() {
+    var t = this;
+    this.axios
+      .post("http://lawpro.earnest.pro/api/login_main/articleList", {
+        page: t.page
+      })
+      .then(res => {
+        window.console.log(res.data);
+        if (res.data.code == 200) {
+          t.list = res.data.data;
+          window.$(window).scroll(() => {
+            var windowH = window.$(window).height(); //设备可见区域高度
+            var documentH = window.$(document).height(); //整个网页的高度（包括未显示的部分）
+            var scrollH = window.$(window).scrollTop(); //滚动条滚动上去的高度
+            //或者  scrollH = $(document).scrollTop();
+            if (windowH + scrollH >= documentH) {
+              // do something
+              // alert(2);
+              window.console.log(1)
+              t.getlist()
+            }
+          });
+        }else{
+          t.text = "暂无数据"
+        }
+      });
   }
 };
 </script>