yb课堂 首页home开发 《三十七》

Home模块开发#

拆分子组件#

• Home
  • banner
  • videoList

指令属性里面取data里面的数据不用加{{}}，html标签内容体中间则需要加双花括号

创建component文件夹#

　　在src/views/Home下创建component文件夹

在component目录下，分别创建Banner.vue、VideoList.vue

首页开发#

Home.vue

<template>
  <div>
    <!--首页轮播图-->
    <home-banner :banners="banners"></home-banner>
    <home-video-list :videoList="videoList"></home-video-list>
    <common-footer></common-footer>
  </div>
</template>Í
<script>
import HomeBanner from "./component/Banner";
import HomeVideoList from "./component/VideoList";
import CommonFooter from "@/components/CommonFooter";
import { getBanner, getVideoList } from "@/api/getData.js";
export default {
  //注册组件
  components: {
    HomeBanner,
    HomeVideoList,
    CommonFooter
  },
  //声明数据源
  data() {
    return {
      banners: [],
      videoList: []
    };
  },
  //定义方法
  methods: {
    async getBannerData() {
      try {
        //获取轮播图数据
        const result = await getBanner();
        console.log(result)
        console.log(result.code == 0)
        if (result.data.code == 0) {
          this.banners = result.data.data;
        }
      } catch (error) {
        console.log(error);
      }
    },
    async getVList() {
      try {
        //获取视频列表
        const result = await getVideoList();
        console.log(result)
        if (result.data.code == 0) {
          this.videoList = result.data.data;
        }
      } catch (error) {
        console.log(error);
      }
    }
  },
  //页面渲染完成调用方法获取数据
  mounted() {
    this.getBannerData();
    this.getVList();
  }
};
</script>
<style lang="scss" scoped>
</style>

轮播图开发#

cube-ui轮播图参考地址：https://didi.github.io/cube-ui/#/zh-CN/docs/slide

Banner.vue

<template>
  <div>
    <cube-slide :data="banners">
      <cube-slide-item v-for="(item, index) in banners" :key="index">
        <a :href="item.url">
          <img :src="item.img" style="width:100%" />
        </a>
      </cube-slide-item>
    </cube-slide>
  </div>
</template>
<script>
export default {
  //获取父组件传过来的值
  props: {
    banners: {
      type: Array,
      required: true
    }
  }
};
</script>
<style lang="scss" scoped>
</style>

视频列表开发#

router-link

• 用于路径跳转
• 文档：https://router.vuejs.org/zh/api/#router-link

VideoList.vue

<template>
  <div class="list-content">
    <div class="list">
        <router-link v-for="item in videoList" :key="item.id" :to="{path:'coursedetail',query:{video_id:item.id}}" class="course">
            <div class="item_img">
                <img :src="item.cover_img" />
            </div>
            <div class="video_info">
                <div class="c_title">
                    {{item.title}}
                </div>
                <div class="price">
                    ￥{{item.price/100}}
                </div>
            </div>
        </router-link>
    </div>
  </div>
</template>Í
<script>
export default {
  props: {
    videoList: {
      type: Array,
      required: true
    }
  }
};
</script>

<style lang="scss" scoped>
//列表包裹层边距
.list-content {
  margin-top: 20px;
  padding: 0 13px;
}
//视频包括层
.list {
  display: flex; //设置flex布局
  flex-wrap: wrap; //换⾏排列
  justify-content: space-between; //两端对⻬
  padding-bottom: 55px;
}
//视频个体层
.course {
  width: 48%;
  margin-bottom: 17px;
}
//视频图⽚
.item_img {
  font-size: 0; //消除图⽚元素产⽣的间隙
  box-shadow: 0 4px 11px 0 rgba(43, 51, 59, 0.6); //设置图⽚阴影，rgba前三个参数是颜⾊编码，最后⼀个是透明度
  border-radius: 8px; //设置图⽚圆⻆
  img {
    width: 100%;
    border-radius: 8px;
  }
}
.c_title {
  //设置超过两⾏隐藏 start
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-all;
  //设置超过两⾏隐藏 end
  font-size: 11px;
  height: 26px;
  line-height: 13px;
  margin-top: 10px;
  color: #2b333b;
}
//价格
.price {
  margin-top: 8px;
  font-size: 12px;
  color: #d93f30;
}
</style>