九、View页面

为了丰富页面，可以先来创建几个组件

一、走马灯组件

这里使用的是ElementUI的走马灯效果

封装组件Carousel.vue,要注意一个问题，既然是封装的组件，所以里面的图片肯定是不能固定的，所以，需要主页面传递参数过来

App.vue页面封装图片数组数据

<template>
  <div id="app">
    <el-container>
      <el-header> 
      </el-header>
      <el-main>
        <!--调用走马灯组件，传递banners参数-->
        <Carousel :banners="banners"></Carousel>
        <!-- 调用子组件，并且调用子组件的change事件 -->
        <Channels @change="handleChange"></Channels>
        <NewList :news="news"></NewList>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Channels from "./components/Channels";
import NewList from "./components/NewList";
import Carousel from "./components/Carousel";
import { getNewsList } from './services/NewsService';
export default {
  name: "App",
  components: { Channels,NewList,Carousel },
  data(){
    return {
      chooseId:0,
      news:[],
      banners:[
        {url:require("@/assets/banner/banner1.png"),link:"http://www.yanhongzhi.com"},
        {url:require("@/assets/banner/banner2.png"),link:"http://www.yanhongzhi.com"},
        {url:require("@/assets/banner/banner3.png"),link:"http://www.yanhongzhi.com"},
        {url:require("@/assets/banner/banner4.png"),link:"http://www.yanhongzhi.com"},
      ],
    } 
  },
  //其他省略 
};
</script>

这里要注意一个问题，在调用静态图片的时候，不是直接在assets文件夹下面找文件，因为整个程序需要打包，所以打包之后静态文件的路径和现在是不一样的，所以这里使用了require函数，指定静态图片现在的位置

Carousel.vue

<template>
  <el-carousel indicator-position="outside">
    <el-carousel-item v-for="(item,i) in banners" :key="i">

      <a :href="item.link">
          <img :src="item.url" alt="">
      </a>

    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
    props:{
        banners:{
            type:Array,
            required:true
        }
    }
}
</script>

<style>
  #app .el-carousel__container{
    height: 400px;
  }
  img{
    width:100%;
    height: 400px;
    max-width: 1920px;
    line-height: 400px;
  }
</style>

还有一个小问题：由于使用的是ElementUI自己的走马灯效果，所以大小位置是固定了的，要调整走马灯效果，就只有修改ElementUI走马灯的相关css效果，自己修改的话，需要注意CSS优先级的问题

Loading效果

下面的新闻列表内容很多，如果网速较慢的话，读取不出来内容下面就会一直是一片空白，因此需要加入一个Loading想过，让用户知道这里正在加载

<template>
  <div class="loading">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
  </div>
</template>

<style scoped>
.loading {
  height: 40px;
  margin: 100px auto;
  display: flex;
  justify-content: center;
}
.loading span {
  width: 8px;
  height: 100%;
  border-radius: 4px;
  background: lightgreen;
  animation: load 1s ease infinite;
  margin: 0 2px;
}
@keyframes load {
  0%,
  100% {
    transform: scaleY(1.5);
    background: lightgreen;
  }
  50% {
    transform: scaleY(1);
    background: lightblue;
  }
}
.loading span:nth-child(2) {
  animation-delay: 0.2s;
}
.loading span:nth-child(3) {
  animation-delay: 0.4s;
}
.loading span:nth-child(4) {
  animation-delay: 0.6s;
}
.loading span:nth-child(5) {
  animation-delay: 0.8s;
}
</style>

这其实就是一个纯css3实现的Loading效果

Views页面

现在的页面是由一个个的Component组件所组成的，但是这些组件组成了一个页面，我们一个应用程序，是需要很多页面的，比如现在编写的也就是一个主页面，但是还会有详细页面，登录页面，注册页面等等，所以，我们可以将组件再次进行整合，组合成一个个的页面，再进行处理

创建Home.vue页面

<template>
  <div>
    <Carousel :banners="banners"></Carousel>
    <!-- 调用子组件，并且调用子组件的change事件 -->
    <Channels @change="handleChange"></Channels>
    <Loading v-show="isLoading"></Loading>
    <NewList v-show="!isLoading" :news="news"></NewList>
  </div>
</template>

<script>
import Channels from '../components/Channels'
import Carousel from '../components/Carousel'
import NewList from '../components/NewList'
import Loading from '../components/Loading'
import {getNewsList} from '../services/NewsService'
export default {
    data() {
        return {
            news:[],
            chooseId:0,
            isLoading:true,
            banners:[
                {url:require("@/assets/banner/banner1.png"),link:"http://www.yanhongzhi.com"},
                {url:require("@/assets/banner/banner2.png"),link:"http://www.yanhongzhi.com"},
                {url:require("@/assets/banner/banner3.png"),link:"http://www.yanhongzhi.com"},
                {url:require("@/assets/banner/banner4.png"),link:"http://www.yanhongzhi.com"},
            ]
        }
    },
    components:{Channels,Carousel,NewList,Loading},
    methods: {
        async handleChange(chooseId){
            this.isLoading = true;
            this.chooseId = chooseId;
            console.log("主页面---->" + chooseId);
            let resp = await getNewsList(this.chooseId);
            this.news = resp.contentlist;
            this.isLoading = false;
        }
    },  
}
</script>
<style>
</style>

修改App.vue页面

<template>
  <div id="app">
    <el-container>
      <el-header>
      </el-header>
      <el-main>
        <Home></Home>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Home from "./views/Home";
export default {
  name: "App", 
  components:{Home}
};
</script>
<style>
</style>