zoukankan      html  css  js  c++  java
  • 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="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>
    作者:陈彦斌

    个性签名:没有学不会的技术,只有不学习的人!
    联系方式:543210188(WeChat/QQ),推荐WeChat
  • 相关阅读:
    tensorflow 2.0 学习 (十) 拟合与过拟合问题
    tensorflow 2.0 学习 (九) tensorboard可视化功能认识
    tensorflow 2.0 学习 (八) keras模块的认识
    tensorflow 2.0 学习 (七) 反向传播代码逐步实现
    tensorflow 2.0 学习 (六) Himmelblua函数求极值
    tensorflow 2.0 学习 (五)MPG全连接网络训练与测试
    arp协议简单介绍
    Pthread spinlock自旋锁
    线程和进程状态
    内核态(内核空间)和用户态(用户空间)的区别和联系·
  • 原文地址:https://www.cnblogs.com/chenyanbin/p/13341024.html
Copyright © 2011-2022 走看看