Vue实战商城项目（三）—— 商品信息展示

---

前言

本篇文章概述：商品信息列表切换，商品信息数据的获取，商品信息的展示。

---

以下是本篇文章正文内容

一、商品信息列表切换

1.创建tabControl组件

代码如下（示例）：

给列表项绑定一个点击事件，并将当前的index值传入，在data中定义一个变量currentIndex默认值为0，每次点击将当前的索引值index赋给currentIndex，这样动态绑定的样式active为对应点击的列表项时就会为true，从而显示对应的激活样式。

tabClik(index){
          this.currentIndex = index ;
        }

2.父组件传入数据

     <tab-control ref="tabControl2"  :title="['流行','新款','精选']" ></tab-control>

列表项已数组的形式传入，完成后效果如下：

二、商品信息数据的获取

在network目录下的home.js中编写获取商品数据的代码，将其导出（此函数和获取轮播图数据的函数可写在同一个js中，因为都是主页相关的网络请求函数，后面有关网络请求封装的方法同理）

代码如下（示例）：

export function  getHomeGoods(type,page) {
  return request({
    url:'/home/data',
    params:{
      type,
      page
    }

  })

因为商品信息是分页展示的，所以获取数据时需要传入对应的page默认page是 0 还需要传入对应的列表项，不同列表项分别获取对应不同的数据，如“流行”则对应为pop下的数据

代码如下（示例）：

   getHomeGoods(type){
        const page = this.goods[type].page + 1
        getHomeGoods(type,page).then(
          res=>{
            this.goods[type].list.push(...res.data.list)
            this.goods[type].page += 1
          }
        )
      }

所以goods对象应该这样定义：

代码如下（示例）：

三、商品信息的展示

1.组件的封装

代码如下（示例）：

在goodsListItem中展示父组件传入的数据，并设置好对应的样式

<template>
<div class="goods-item" >

  <img v-lazy="showImg" alt="" > //v-lazy 懒加载 
  <div class="goods-info">
  <p>{{goodsItem.title}}</p>
    <span class="price">{{goodsItem.price}}</span>
    <span class="collect">{{goodsItem.cfav}}</span>

  </div>
</div>

</template>

2.数据传入对应类型的数据

当我们点击对应的列表项时，需要展示对应不同的商品信息，这样就需要我们传入给goodList中的数据根据点击不同的列表项而传入不同的数组。这该如何实现呢？

首先，我们需要回到TabControl组件中找到点击事件，将每次点击时将对应的索引值index传给父组件。

        tabClik(index){
          this.currentIndex = index ;
          this.$emit('tabClick',index) //通过$emit将index传给父组件home
        }

然后，父组件得到对应的索引值则执行函数将对应索引值转化为不同的商品信息项，需要在data中定义一个currentType，默认为‘pop’

tabClick(index){
            switch (index) {
              case 0:
                this.currentType = 'pop';
                break;
              case 1:
                this.currentType = 'new';
                break;
              case 2:
                this.currentType = 'sell';
                break
            }

          }

这样，我们在点击不同列表项时，对应会currentType的值也会变化，也就能获取到不同的商品类型的数据了。

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

---

总结

以上就是所有内容，本次商品信息展示需要注意的点是商品信息数据获取时需要传入两个对应的参数，一个是商品信息类型，另一个是对应的页码，有了这两个参数才能获取到想要的数据，关于page等到后面讲解下拉加载更多时会详细讲解用途。