1. Request for commodity data
To display product data, the first thing we have to do is to request the data first.
Because there are three data in our TabControl, when we request data, it is also divided into three categories
The data structure that holds the item:

goods: {popular[]/new[]/selected[]} each of which corresponds to an array, each array may save 30, 60, 90, etc., it will pull up to load more, to The amount of data saved is different. It will also appear that my popular data has been loaded on the 8th page, the new model has been loaded on the 5th page, and the selection has only been loaded on the third page. At this time, we need to design the data structure.

goods:{
       'pop':{page: 1,list:[]},//The default page is the first page, the data in the pop corresponding pop is stored in the list, the page is used to record my current loading data, which page is loaded to
       'news':{page: 1,list:[]},
       'sell':{page: 1,list:[]}

in data

 goods: {
        'pop':{page:0,list:[]},
        'new':{page:0,list:[]},
        'sell':{page:0,list:[]},
      },

Request data first: in home.js

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

Import into Home.vue

import {getHomeMultidata,getHomeGoods} from '@/network/home';

When should the request be sent? We can send requests right after our component is created, so we in created

created(){
//Request multiple data for an item
      this.getHomeGoods('pop')
      this.getHomeGoods('new')
      this.getHomeGoods('sell')
}

But at this time there are too many things in created(), we extract another layer at this time, store the main logic, put this extracted content into methods, and the code at this time becomes

 created() {
    //After the component is created, quickly send a network request to request multiple data
    // this in create is our current component object
      this.getHomeMultidata()
      //Network request related (request for product data)
      this.getHomeGoods('pop')
      this.getHomeGoods('new')
      this.getHomeGoods('sell')
  },
    methods: {
      getHomeMultidata() {
        getHomeMultidata().then(res => {
          // console.log(res);
          this.banners = res.data.banner.list;
          this.recommends = res.data.recommend.list;
        })
      },
      getHomeGoods(type) {
        const page = this.goods[type].page + 1
        getHomeGoods('pop', page).then(res => {
          this.goods[type].list.push(...res.data.list)
          this.goods[type].page += 1
        })
      }
    }

We first request the first page, and then use drop-down to load more. The type in getHomeGoods(type) is a parameter in tabControl.
in

const page = this.goods[type].page + 1

This sentence means that +1 is based on my original page. Put I request the data in 'pop', then the type is pop, get the object 'pop': {page: 0, list: []}, get its page and then+1. It is 0 at the beginning, and then+1 comes 1. page:1, At this time, the obtained variable is a local Variables are destroyed after the function ends So we need to put this data into the cor res ponding list to save

this.goods[type].list.push(...res.data.list)

At this time, there is one more set of data in pop, page+1

 this.goods[type].page += 1

2. Display of product data
We create a new goods folder in the content folder, which stores GoodList.vue and GoodListItem.vue
At GoodList.vue we

<template>
<div class="goods">
  <goods-list-item v-for="item in goods" :goods-item="item">
  </goods-list-item>
</div>
</template>

<script>
import GoodsListItem from '@/components/content/goods/GoodsListItem';
export default {
  name: 'GoodsList',
  components:{
    GoodsListItem
  },
  props:{
    goods: {
      type:Array,
      default() {
        return [];
      }
    }
  }
};
</script>

<style scoped>
.goods {
  display: flex;
  /*flex-wrap Then you can set whether the container can wrap, nowrap means no wrapping, and when the middle width of its child element is greater than the width of the container, the width of the child element will be squeezed to become smaller*/
  /*  wrap That is, line wrapping, the width of its child elements will not be squeezed smaller*/
  flex-wrap: wrap;
  /*equal score*/
  justify-content: space-around;

  padding: 2px;
}

</style>

We first need to receive the value passed in from Home.vue: import, register, and reference GoodList.vue in Home.vue

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

Outgoing goods data, received in GoodList.vue

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

Then pass each small item into the GoodListItem.vue component

 <goods-list-item v-for="item in goods" :goods-item="item">
  </goods-list-item>

in GoodListItem.vue

<template>
  <div class="goods-item" @click="itemClick">
    <img :src="showImage" :key="showImage" alt="" @load="imageLoad" >
    <div class="goods-info">
      <p>{{goodsItem.title}}</p>
      <span class="price">{{goodsItem.price}}</span>
      <span class="collect">{{goodsItem.cfav}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GoodsListItem',
  props:{
    goodsItem:{
      type:Object,
      default() {
        return [];
      }
    }
  },
};
</script>

<style scoped>
.goods-item {
  padding-bottom: 40px;
  width: 48%;
  position: relative;
}

.goods-item img {
  width: 100%;
  border-radius: 5px;
}

.goods-info {
  font-size: 12px;
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  overflow: hidden;
  text-align: center;
}

.goods-info p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 3px;
}

.goods-info .price {
  color: var(--color-high-text);
  margin-right: 20px;
}

.goods-info .collect::before {
  content: '';
  position: absolute;
  left: -15px;
  top: -1px;
  width: 14px;
  height: 14px;
  background: url("~assets/img/common/collect.svg") 0 0/14px 14px;
}
</style>

Receive the data in the item passed in by GoodList.vue, where the data in the item is as follows:

The above code for the things we want to display has been written, and the specific style is also written in the following style.
In summary, the effect is as follows: