supermall的“当季流行组件”

1当季流行组件

1-1、案例中本身是一张图片，将这张图片保存在img目录下的home文件夹中；

他是a标签中的img；

仍然需要单独建立一个组件；

FertureView.vue

1-2、主页的导航栏需要不能跟着拖动直接移动了，需要固定定位position:fix或者sticky，再设置z-index。

（实际操作中出现下面所有组件位置都向上移动了，因为导航栏已经脱离了文档流，遮住了部分轮播图，给轮播图价格padding-top，使用margin-top时，navebar也跟着下移）

>>>>>>Flex布局的学习资料<<<<<<<

2选项卡组件

TabControl组件，这个组件的设计方式有点类似导航栏组件，但是又有区别。导航栏组件用的是插槽，因为三个位置可能需要实现不同的功能。而选项卡功能组件只需要显示文字和路由功能，复用时也只需要修改内部文字即可；

2-1新建tabcontrol组件，放在component/content文件夹中，方便以后复用。

使用v-for, 需要用到item和index，div中的span存放文字。数据来源于使用它的组件，本案例是home组件。所以要定义该组件的props属性，可以给该组件命名title，数组类型；

//在home.vue中使用
<tab-control :titles="['流行', '新品', '特卖']"></tab-control>

2-2设置布局CSS，position：sticky；height：44px；

2-3设置选中时的效果css；

判断是否被选中的技巧，设置属性currentindex，默认值为0，:class={active:currentindex=index}

2-4设置点击选中的效果css

@click=“itemClick（index）”，当前点击的对象的index值修改到currentindex的值

<template>
  <div class="tab-control">
    <div
      class="tc-items"
      v-for="(item, index) in titles"
      :key="index"
      :class="{ active: curIndex === index }"
      @click="itemClick(index)"//这里需要传入参数index
    >
      <span>{{ item }}</span>
    </div>
  </div>
</template>
*************
 methods: {//改变this.curIndex
    itemClick(index) {
      this.curIndex = index;//this.index是指是undefined，只能用参数index
    },
  },

页面滑动到距离顶部44px时固定定位，其他距离时正常滑动使用position: sticky;top: 44px;注意，在使用的home.vue组件中设置CSS，因为组件要重复使用，不能在原组件内部设置style，影响复用性

2-5home中选项卡的数据获取与处理

 2-5-1设计好数据储存额格式与方式，保存在home.vue组件中

 2-5-2在network中的home.js中，添加网络请求的对应方法；gethomegoods()，该方法需要传递相应的参数；require.js中的需要params参数；？？

//理解params参数
axios({
 // url: 'http://123.207.32.32:8000/home/multidata?type=pop&page=1',用params参数替代这个
   url: 'http://123.207.32.32:8000/home/multidata',
   params: {
     type: 'pop',
     page: 1
   }
 }).then(res => {
   console.log(res);
 })

export function getHomeGoods(type, page) {//注意网络请求传入参数的方法，复习axios
  return request({
    url: '/home/data',
    params: {
       type,//type:type
       page,//page:page
    }
  })
}

2-5-3在home.vue中调用gethomegoods方法，获取数据，优化代码，在created函数中，不宜写过多的业务代码，就把业务代码抽取出来，添加到methods中，使用一个与业务函数同名的方法包裹业务函数，在created调用即可。

2-5-4处理保存已经获取的数据；

goods中的分为三类（type），pop，new，sell，每一类都有一个page和list。此处需要实现重复调用获取每一类数据的方法，实现修改页码page，增加商品条目list的数量（案例是每一页30条？），所以不能把page写死。

const page=this.goods[type].page+1;调用gethomegoods（type,page）函数，获取商品数据，再将商品数据push到this.goods[type].list中，然后修改page，注意初始化之前原list数组数据为空。

  getHomeGoods(type) {
      //获取tabcontrol下面商品列表的数据。
      const page = this.goods[type].page + 1;
//完整的请求是 url: 'http://152.136.185.210:7878/api/m5/home/goods?type=pop&page=1
      getHomeGoods(type, page).then((res) => {
        this.goods[type].list.push(...res.data.list); //res.data.list是有30个数据的数组，...的语法是把所有数据push进去。直接用push就是[a,b,[x,y]]
        this.goods[type].page += 1; //改变原有数据中的page
        console.log(this.goods[type].list);
      });
    },

测试：接下来即可实现调用三次gethomegoods，传入不同的type，获取了三组不同的数据，进入页面时，自动获取page为1的数据。

2-6 通过获取的数据的处理，进行相关组件的设计。

2-6-1新建GoodsList组件和他的子组件GoodsListItem组件，保存在component/content文件夹中。

在home.vue 中请求到数据以后，分别把数据传递到goodslist和goodslistitem（goodslist的子组件）组件中。

 <goods-list :goods="goods['pop'].list"></goods-list>

home.vue中使用goodslist组件，并且将获取的商品数据传递给goodslist组件，

v-for，来获取子组件的数量。

//goodsList组件，并使用子组件goodslistitem组件
<template>
  <div class="goodslist">
    <goods-list-item
      v-for="item in goods"
      :key="item.iid"
      :goodsItem="item"//这里是item的数据传递给子组件的数据goodsitem中
    ></goods-list-item>
  </div>
</template>


props: {
    goods: {
      type: Array,
      default() {
        return [];
      },
    },
 }

goodslistitem组件

//goodslistItem组件
<template>
  <div class="goodslist-item">
    <img :src="goodsItem.show.img" alt="" />
    <div class="goods-info">
      <p>{{ goodsItem.title }}</p>
      <span class="price">{{ goodsItem.price }}</span>
      <span class="collect">{{ goodsItem.cfav }}</span>
    </div>
  </div>
</template>

props: {
    goodsItem: {
      type: Object, //goodslist中的item是Object不是Array
      default() {
        return [];
      },
    },

现在已经可以正常显示图片和文字，现在就需要设置各组件的css属性；

2-7

tabctrol组件的点击，goodslist中内容跟着切换，需要用到$emit()，把子组件的自定义事件传递给父组件，在通过home.vue中的父组件事件绑定，操作需要的数据和显示。

1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, fn );//监听event事件后运行 fn； 

//@click="itemClick(index)
methods: {
    itemClick (index) {
      this.currentIndex = index
      this.$emit('tabClick', index )
    }
  }

 

 /*
<tab-control
      class="tab-control"
      :titles="['流行', '新品', '热卖']"
      @tabClick="tabClick" // 错误写法：@tabClick="tabClick(index)"
    ></tab-control>
*/
//curgoodstype是data中心设置的属性，记录当前的goodslist显示数据的type
  tabClick(index) {
      this.curgoodstype = index < 1 ? "pop" : index == 1 ? "new" : "sell"; //
    },

//<goods-list :goods="showGoods"></goods-list>
//修改goods-list中的数据
//curgoodstype是data中心设置的属性
computed: {
    showGoods() {
      return this.goods[this.curgoodstype].list;
    },
  },

 

三目运算符的嵌套写法：

var a =10;

console.log((a<5)?2:(a>5)?4:0)

 //4