前端路线--Vue(day11)

首页列表的开发HomeList

/* 
1.把Tab栏内的内容定义成数据
2.v-for遍历出li,并且加上index,绑定key
3.给li定义点击事件   @click="changeActIndex(index)
4.data中定义activeIndex:0
5.li动态绑定类名 <li:class="activeIndex == index ? 'active' : ''" @click="changeActIndex(index)">
6.methods: 
    changeActIndex(index) {
      this.activeIndex = index;
    }

结构：
  <div class="home_list">
    <div class="home_list_tabs">
      <ul>
        <li
          v-for="(homeListTab, index) in homeListTabs"
          :key="homeListTab.id"
          :class="activeIndex == index ? 'active' : ''"
          @click="changeActIndex(index)"
        >
          <h3>{{ homeListTab.title }}</h3>
          <p>{{ homeListTab.tips }}</p>
        </li>
      </ul>
    </div>
    <ListPage :lists="homeListDatas"></ListPage>
  </div>

data:
  data() {
    //这里存放数据
    return {
      activeIndex: 0, //激活的下标
      homeListTabs, //解构出来的json数据 homeListTabs:homeListTabs
      homeListDatas,
    };
  },


methods: 
    methods: {
    // 点击改变tab栏的索引
    changeActIndex(index) {
      this.activeIndex = index;
    },
  },


*/

定义插槽

将来在组件标签内部写Html结构,来替换slot
<slot></slot>在原先的组件预留
PS：在组件标签内写的Html结构会替换插槽
    在使用引入地方写<组件>结构<组件>

使用者:HomeCate.vue
    <HomeClassify>
      <div class="classify_wrap">
        <ul>
          <li v-for="i in 5" :key="i">
            <img src="@/assets/images/guo.jpg" alt="" />
            <p>电饭锅</p>
          </li>
        </ul>
      </div>
    </HomeClassify>
定义插槽:HomeClassify.vue
<template>
  <div class="home_classify">
    <slot></slot>
  </div>
</template>

首页的秒杀swiper HomeSeckil

swiper官网(建议用4版本)
1.下载swiper
cnpm install swiper --save
2.引入swiper和swiper.css
import Swiper from "swiper"
import "@/style/swiper.css"
3.使用swiper
在mounted中:
  mounted() {
    // 初始化一个swiper
    new Swiper(".mySwiper", {
      slidesPerView: 3,
      centeredSlides: false,
      spaceBetween: 0,
      grabCursor: true,
    });
  }
4.将选择好的样式F12--cv
<template>
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="i in 10" :key="i">
          <div class="seckil-img">
            <img
              src="https://img14.360buyimg.com/n1/s300x300_jfs/t1/107620/38/15906/368883/5eaf7085E3cc8d8ef/b2dac719f339e972.jpg"
              alt=""
            />
          </div>
          <h3>秒杀标题秒杀标题秒杀标题秒杀标题秒杀标题秒杀标题秒杀标题</h3>
          <div class="shop_price">1999</div>
          <div class="market_price">2599</div>
        </div>
      </div>
    </div>
</template>

分类页

 分三个组件:header TabBar 和中间块
一、CategoryHeader(分类头部的开发)
    头部一般高4.4rem
    在最右边的分类查看：
     <template>
        <div class="category_header">
            <div class="back" @click="back">
            <i class="iconfont icon-xiangzuo"></i>
            </div>
            <div class="cate_search" @click="toSearchPage">
            <i class="iconfont icon-sousuo"></i>
            </div>
            <div class="toggle_btn">
            <slot></slot>
            </div>
        </div>
</template>

二、CategoryContent(分类内容的开发)
中间部分铺满:(两种方法)
1.将content设置定位：
top:0  left:0  bottom:0  right:0
top:4.4rem(减去分类头)      bottom:4.9rem  (减去TabBar)

2.content中：
height:100vh(视口高度)
width:100vw(视口宽度)

图片