Vue学习Day17 封装tab栏、请求商品数据、封装回到顶部、上拉加载更多

想利用暑假时间好好学习一下vue，会记录每一天的学习内容。
今天是学习vue的第17天！

起起伏伏乃人生常态，继续加油～

---

---

1. 轮播图展示

(不写具体代码，直接引入使用)

在Home.vue中代码：

// 引入
import {Swiper} from '../../components/common/swiper/Swiper.vue';
import {SwiperItem} from '../../components/common/swiper/SwiperItem.vue'

// 注册组件
components: {
    NavBar,
    Swiper,
    SwiperItem
  },

<!-- 放在navbar下面-->
<!-- 不用写四个，直接用v-for遍历-->
<!-- 每张图实际上可以点击跳转链接，所以用<a>标签包裹-->
<swiper>
  <swiper-item v-for="item in banners" :key="item.title">
    <a :href="item.link">
      <img :src="item.image" alt="">
    </a>
  </swiper-item>
</swiper>

目前效果：

---

还可以再抽一层，如果不想把轮播图的内部逻辑也放在Home.vue
抽到HomeSwiper.vue中：

这里要注意在HomeSwiper.vue中，我们是没有banners的数据的，就要借助父子通信了

// HomeSwiper.vue
props: {
  banners: Array
},

在Home.vue中引入、注册、使用：

import HomeSwiper from './childComponents/HomeSwiper.vue'

components: {
  NavBar,
  HomeSwiper
},

<!-- 这里要把banners数据传过去-->
<home-swiper :banners="banners"></home-swiper>

---

2. 推荐信息的展示

新建一个组件文件：

要拿到的数据在Home.vue中，依然需要父子通信

props: {
  recommends: Array
}

在Home.vue中引入、注册、使用：

import HomeRecommendView from './childComponents/HomeRecommendView.vue'

components: {
    NavBar,
    HomeSwiper,
    HomeRecommendView
},

<!--这里要把recommends数据传过去-->
<home-recommend-view :recommends="recommends"></home-recommend-view>

HomeRecommendView.vue中代码：
比较简单，没啥要说的

<template>
  <div id="recommend-view">
    <div v-for="item in recommends" :key="item.sort">
      <a :href="item.link">
        <img :src="item.image" alt="">
        <div>{{ item.title }}</div>
      </a>
    </div>
  </div>
</template>

样式比较简单也就不放代码了

---

3. 封装一张图片

是的，就是一张图片，但是因为依然是一个模块，所以还是把它封装了
步骤都跟上面的封装一样，这里跳过

---

4. tab切换栏的封装

tab切换栏在别的界面也可能会用到，所以封装在components/content中比较合适

活跃状态的tab栏有颜色和文字底部一条线
主要逻辑是给选项卡动态绑定active类
默认是第一个选项卡有颜色，所以设置一个currentIndex = 第一个选项卡的index = 0
点击选项卡的时候能拿到index，这时候就应该让currentIndex = index，使得{active: ture}，让该点击的选项卡绑定上active类

<template>
  <div class="tab-control">
    <div @click="clickTab(index)" v-for="(item,index) in titles" :key="index">
      <span :class="{active: currentIndex == index}">{{ item }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    titles: Array,
  },
  data() {
    return {
      currentIndex: 0
    }
  },
  methods: {
    clickTab(index) {
      this.currentIndex = index
    }
  }
};
</script>

.active {
  color: #ff8198;
  position: relative;
}

---

5. 首页商品数据的请求和保存

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

// Home.vue
data() {
  return {
    goods: {
      'pop': {page: 1, list: []},
      'new': {page: 1, list: []},
      'sell': {page: 1, list: []},
      }
  }
},
methods: {
  getHomeGoodsData(type) {
      const page = this.goods[type].page;
      getHomeGoodsData(type, page).then(res => {
        console.log(res);
        // 这里不要直接赋值，当下拉滚动条，要请求更多的数据，也要加进来
        this.goods[type].list.push(...res.data.data.list);
        this.goods[type].page += 1;
      })
    }
},
created() {
  // 2.请求商品数据
  this.getHomeGoodsData('pop');
  this.getHomeGoodsData('sell');
  this.getHomeGoodsData('new');
}

---

6. 首页商品数据的展示

Goods.vue中代码：
先从Home.vue中拿到一整组goods数据，再传给子组件GoodsItem.vue

<template>
  <div class="goods">
    <goods-item v-for="item in goods" :key="item.title" :goods-item="item"></goods-item>
  </div>
</template>

<script>
 import GoodsItem from './GoodsItem.vue'
export default {
  props: {
    goods: Array
  },
  components: {
    GoodsItem
  }
}
</script>

GoodsItem.vue中代码：

<template>
  <div class="goods-item">
    <img :src="goodsItem.show.img" alt="">
    <div>
      <p class="goods-item-title">{{goodsItem.title}}</p>
      <span class="goods-item-price">{{goodsItem.price}}</span>
      <span class="goods-item-star">🌟{{goodsItem.cfav}}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    goodsItem: Object
  }
}
</script>

Home.vue中代码：

<!-- 拿到goods对象中，'pop'对应的对象中的list-->
<!-- 传给Goods组件 -->
<goods :goods="goods['pop'].list"></goods>

(这里我们的tab栏还不能切换对应商品，暂时传了一个固定的'pop')
(样式不放了，不是重点)

---

7. 点击tab栏切换商品数据

其实就是下面这行代码，不能传一个固定的'pop'
实际上是用户点到了哪个选项卡再将对应页面的数据传给子组件Goods->GoodsItem，再显示对应的商品

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

我们的TabControl组件中是监听了click事件的，这时候应该在子组件TabControl中发射自定义事件，也就是将用户点击了哪个选项卡相关的信息发到父组件Home中

TabControl.vue中代码：

methods: {
  clickTab(index) {
    this.currentIndex = index;
    // 自定义事件名用短横线命名
    // index要传出去，(选项卡的索引
    this.$emit('tab-item-click',index);
  }
}

Home.vue中代码：

<!-- 自定义事件监听器要与自定义事件名完全匹配，不能用驼峰-->
<tab-control class="home-tab" :titles="titles" @tab-item-click="clickTab"></tab-control>

上面的tab-item-click事件对应了clickTab方法，我们就要定义一个clickTab方法来处理这个事件
我们再思考一下index怎么与goods对象中的三个属性'pop'、'new'、'sell'对应起来：

data() {
  return {
    goods: {
      'pop': {page: 1, list: []},
      'new': {page: 1, list: []},
      'sell': {page: 1, list: []},
    },
    goodsType: ['pop','new','sell'],
    // 默认值是'pop'
    currentType: 'pop'
  }
}

clickTab(index) {
  this.currentType = this.goodsType[index]
},

这个时候就可以把该行固定写了'pop'改成动态的了：

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

(样式凑合看，马马虎虎随便写了一下😢)

---

8. 回到顶部组件封装使用

先新建一个BackTop组件，然后在Home组件中应用
(这里跳过，不放代码了，上面重复过很多遍)

然后要实现一个点击BackTop组件回到顶部的功能，
⚠️一下：组件不能直接监听点击事件

<!-- 错误写法，监听不到 -->
<back-top @click="backTop"></back-top>

如果想要监听组件的原生事件，要加修饰符.native

<!-- 正确写法 -->
<back-top @click.native="backTop"></back-top>

backTop() {
  let timer = null;
  timer = setInterval(() => {
    document.documentElement.scrollTop > 0
      ? (document.documentElement.scrollTop =
          document.documentElement.scrollTop - 10)
      : clearInterval(timer);
  }, 5);

我们还需要实现：当界面滚动到一定位置，这个回到顶部按钮再出现，否则不出现

不出现可以在样式中设置display:none，这里我就用了动态绑定类的方式：

<!-- 当isHide为true时，会有hide类-->
<back-top :class="{hide: isHide}" @click.native="backTop"></back-top>

data() {
  return {
  	// 默认不出现
    isHide: true，
  }
},
// 生命周期钩子函数，在这个阶段页面已经渲染好了
mounted() {
  // 监听界面的滚动事件
  window.onscroll = () => {
    document.documentElement.scrollTop > 800
      ? (this.isHide = false)
      : (this.isHide = true);
}

---

9. 上拉加载更多

当滚动条到达界面底部时会自动加载更多商品数据：

滚动条到达底部会调用getHomeGoodsData()方法，会发送一次新的网络请求，同时将新请求到的结果push进goods的list数组，同时page+1
(这里判断滚动条是否到达底部我没写兼容)

methods:{
  listenScroll() {
    window.onscroll = () => {
      document.documentElement.scrollTop > 800
        ? (this.isHide = false)
        : (this.isHide = true);
      if (
        document.documentElement.scrollTop +
          document.documentElement.clientHeight >=
        document.documentElement.scrollHeight
      ) {
        this.getHomeGoodsData(this.currentType);
      }
    };
  },  
}
mounted() {
  this.listenScroll();
}

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

---