修改header

src/api/login.js

@@ -41,3 +41,11 @@ export function homeLinksList(data = {}) {
                        data,
                    });
 }
+//  describe: 【前台】新闻资讯  author: Wgy date:2020-08-10
+export function homeNewsList(data = {}) {
+    return request({
+                       url:    `/home/news/list`,
+                       method: 'post',
+                       data,
+                   });
+}

src/components/client/common/header.vue

@@ -51,41 +51,36 @@
         computed:   {},
         methods:    {
             handleSelect(key, keyPath) {
-                console.log(key);
                 switch (Number(key)) {
                     case 0:
                         this.$router.push({ name: 'index'});
-                        this.activeIndex = '0';
                         break;
                     case 1:
                         this.$router.push({ name: 'examPlatform'});
-                        this.activeIndex = '1';
                         break;
                     case 2:
                         this.$router.push({ name: 'peixunPlatform'});
-                        this.activeIndex = '2';
                         break;
                     case 3:
                         this.$router.push({ name: 'courseDev'});
-                        this.activeIndex = '3';
+
                         break;
                     case 4:
                         this.$router.push({ name: 'newsInfor'});
-                        this.activeIndex = '4';
+
                         break;
                     case 5:
                         this.$router.push({ name: 'helpCenter'});
-                        this.activeIndex = '5';
+
                         break;
                     case 6:
                         this.$router.push({ name: 'aboutUs'});
-                        this.activeIndex = '6';
+
                         break;
 
                     default:
 
                 }
-
             },
         }
         ,

src/router.js

@@ -22,13 +22,6 @@ const router = new Router({
                                       redirect: '/index',
                                   },
                                   {
-                                      name:      'index',
-                                      path:      '/index',
-                                      component: () => {
-                                          return import(/* webpackChunkName: "index" */ './views/client/Index.vue');
-                                      },
-                                  },
-                                  {
                                       name:      'Login',
                                       path:      '/login',
                                       component: () => {
@@ -40,6 +33,13 @@ const router = new Router({
                                       component: () => import(/* webpackChunkName: "Cframe" */ './components/client/common/Cframe.vue'),
                                       children:  [
                                           {
+                                              name:      'index',
+                                              path:      '/index',
+                                              component: () => {
+                                                  return import(/* webpackChunkName: "index" */ './views/client/Index.vue');
+                                              },
+                                          },
+                                          {
                                               name:      'examPlatform',
                                               path:      '/examPlatform',
                                               meta:      {

src/views/client/Index.vue

@@ -1,8 +1,5 @@
 <template>
     <div class="client-index-page">
-        <!-- 首页导航栏 -->
-        <mta-header></mta-header>
-
         <!-- 首页banner栏 -->
         <div class="client-banner">
             <div class="client-container">
@@ -204,9 +201,6 @@
             </el-carousel>
         </div>
 
-        <!-- 底部footer -->
-        <mta-footer></mta-footer>
-
     </div>
 </template>
 

src/views/client/newsInfor.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="client-newsInfor-page">
         <!-- 新闻资讯banner栏 -->
-        <div class="newsInfor-banner"></div>
+     <!--   <div class="newsInfor-banner"></div>-->
 
         <!-- 新闻资讯tab页 -->
         <div class="client-container newsInfor-tab-box">
             <el-tabs tab-position="left" v-model="activeName" @tab-click="handleClick" class="client-newsInfor-tab">
-                <el-tab-pane label="行业动态">
-                    <div class="tab-state-box">
+                <el-tab-pane name="1" label="行业动态">
+                    <div class="tab-state-box" v-infinite-scroll="load" infinite-scroll-disabled="disabled" >
                         <ul>
                             <li>
                                 <img :src="newsInforImg" alt="行业动态">
@@ -18,19 +18,14 @@
                                     <a>了解更多</a>
                                 </div>
                             </li>
-                            <li>
-                                <img :src="newsInforImg" alt="行业动态">
-                                <div class="newsInfor-list-content">
-                                    <h1>企业为什么需要微课</h1>
-                                    <div><i></i><span>2020-08-03</span><i type="visits"></i><span>2000</span></div>
-                                    <p>“在美国谷歌工作期间，我亲眼见到容器技术的先进性，由此产生了创业的想法。”在采访中，才云科技创始人兼CEO、原谷歌资深软件工程师张鑫向创业邦这样介绍道。他曾作为技术带头人从事谷歌容器化集群管理系统的研发，自动化管理 95% 以上的</p>
-                                    <a>了解更多</a>
-                                </div>
-                            </li>
+                            <p v-if="loading" style="margin-top:10px;" class="loading">
+                                <span></span>
+                            </p>
+                            <p v-if="noMore" style="margin-top:10px;font-size:13px;color:#ccc">没有更多了</p>
                         </ul>
                     </div>
                 </el-tab-pane>
-                <el-tab-pane label="媒体关注">媒体关注</el-tab-pane>
+                <el-tab-pane name="2" label="媒体关注">媒体关注</el-tab-pane>
             </el-tabs>
         </div>
     </div>
@@ -38,24 +33,63 @@
 
 <script>
     import MtaBreadcrumb    from '@/components/client/common/MtaBreadcrumb.vue';
+    import { homeNewsList } from '@/api/login.js';
     export default {
         name:       'newsInfor',
         props:      {
         },
         data() {
             return {
+                activeName:'1',
                 newsInforImg:  require(`@/assets/images/client/newsInfor/newsInfor-list-img.png`),
+                count: 0,//起始页数值为0
+                loading: false,
+                totalPages: "",//取后端返回内容的总页数
+                list: [] //后端返回的数组
             };
         },
         components: {
             MtaBreadcrumb
         },
-        computed:   {},
+        computed:   {
+            noMore() {
+                //当起始页数大于总页数时停止加载
+                return this.count >= this.totalPages - 1;
+            },
+            disabled() {
+                return this.loading || this.noMore;
+            }
+        },
         methods:    {
+            load() {
+                //滑到底部时进行加载
+                this.loading = true;
+                setTimeout(() => {
+                    this.count += 1; //页数+1
+                    this.getMessage(); //调用接口，此时页数+1，查询下一页数据
+                }, 2000);
+            },
+            handleClick(data,data1){
+                console.log(data);
+                console.log(data1);
 
+            },
+            getMessage(){
+                let req = {
+                    newsClassifyId : 0,
+                    page : 1,
+                    size : 4,
+                    };
+                homeNewsList(req).then(res=>{
+                       if(res.code===0){
+                            console.log(res);
+                       }
+                })
+
+            }
         },
         created() {
-
+            this.getMessage()
         },
         mounted() {
 
@@ -65,5 +99,8 @@
     };
 </script>
 <style>
-
+    .tab-state-box {
+        height: 700px;
+        overflow-y: auto;
+    }
 </style>