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
  • 相关阅读:
    批量新增百万条数据 十百万条数据
    sqlserver 组内排序
    EF ++属性会更新实体
    Entity Framework Core: A second operation started on this context before a previous operation completed
    abp Cannot access a disposed object. A common cause of this error is disposing
    abp xunit Can not register IHostingEnvironment. It should be a non-abstract class. If not, it should be registered before.”
    hangfire enqueued but not processing(hangfire 定时任务入队列但不执行)
    EF 更新实体 The instance of entity type 'BabyEvent' cannot be tracked because another instance
    datatable to entiy list 不支持可空类型和枚举类型
    webapi 设置不显示接口到swaggerUI
  • 原文地址:https://www.cnblogs.com/chenyanbin/p/13341024.html
Copyright © 2011-2022 走看看