vue3项目实战-第四章-二级分类（基础商品列表渲染/列表筛选/列表无限加载/定制路由滚动行为）_vue3商品分类源码

1、路由配置（router/index.js)

分为两部分：首先，在router/index.js中配置基础路由，需要配置占位符id

{
          path: 'category/sub/:id',
          component: SubCategory
        },

紧接着，在组件中也进行相应的配置，当用户点击某个商品的时候，浏览器获取到这个id然后携带着它去向后台发送请求，然后跳转到对应的商品详情页下面。（Views/subcategory/index.vue）

<RouterLink :to="`/category/sub/${i.id}`">
              <img :src="i.picture" />
              <p>{{ i.name }}</p>
            </RouterLink>

至此，我们完成了基本的配置。

2、面包屑导航渲染

二级分类下的这些详细数据同样是请求后台接口拿到的，所以，我们肯定也是以同样的方式去向后台发送请求。

（1）封装接口（apis/category.js)

/**
 * @description: 获取二级分类列表数据
 * @param {*} id 分类id 
 * @return {*}
 */
export const getCategoryFilterAPI = (id) => {
  return request({
    url: '/category/sub/filter',
    params: {
      id
    }
  })
}

（2）请求接口拿到数据

const categoryData = ref({})
const route = useRoute()
const getCategoryData = async () => {
  const res = await getCategoryFilterAPI(route.params.id)
  categoryData.value = res.result
}
onMounted(() => getCategoryData())

浏览器返回

（3）数据渲染

<el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: `/category/${categoryData.parentId}` }">{{ categoryData.parentName }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{ categoryData.name }}</el-breadcrumb-item>
      </el-breadcrumb>

至此，面包屑导航相关代码就是这么多，一起来看下运行结果吧

3、基础商品列表实现

（1）封装接口

/**
 * @description: 获取导航数据
 * @data { 
     categoryId: 1005000 ,
     page: 1,
     pageSize: 20,
     sortField: 'publishTime' | 'orderNum' | 'evaluateNum'
   } 
 * @return {*}
 */
//面包屑导航数据，二级分类商品名称数据
export const getSubCategoryAPI = (data) => {
  return request({
    url: '/category/goods/temporary',
    method: 'POST',
    data
  })
}

（2）请求接口拿到数据

// 获取基础列表数据渲染
const goodList = ref([])
const reqData = ref({
  categoryId: route.params.id,
  page: 1,
  pageSize: 20,
  sortField: 'publishTime'
})
const getGoodList = async () => {
  const res = await getSubCategoryAPI(reqData.value)
  console.log(res)
  goodList.value = res.result.items
}
onMounted(() => getGoodList())

（3）浏览器返回

（4）使用goodsitem渲染组件：

 <!-- 商品列表-->
        <GoodsItem v-for="goods in goodList" :goods="goods" :key="goods.id" />

4、列表筛选功能实现

在这里，我们需要实现这样一个效果：

当我们点击“1”处对应的选项时，下面的内容要对应更新。我们怎样去实现它呢？主体页面中的这些内容为什么会更新？更新的依据又是什么？

我们可以想一下，这里的数据既然更新了，就说明数据列表发生了变化，数据列表为什么会变化呢？因为我们点击了切换，点击的时候浏览器拿到了这个筛选条件的参数sortField,重新向后台发送了请求。接下来，一起看看实现过程吧。

（1）获取激活项的数据。

来到element-plus官网，我们可以看到这样一组代码

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>

可以看到，这里支持一个双向绑定，当我们点击某一项时，它会把后面的name属性自动的放到activeName的位置。我们也在自己的代码中来尝试一下吧

 <el-tabs v-model="reqData.sortField" @tab-change="tabChange">
        <el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
        <el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
        <el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>
      </el-tabs>

那么，这个绑定的数据来自哪里呢？很显然，来自后台给我们的接口

const reqData = ref({
  categoryId: route.params.id,
  page: 1,
  pageSize: 20,
  sortField: 'publishTime'
})

绑定好之后，我们需要

（2）使用新参数发送请求并重新渲染列表

// tab切换回调
const tabChange = () => {
  console.log('tab切换了', reqData.value.sortField)
  reqData.value.page = 1
  getGoodList()
}

完成之后，来测试一下效果

点击1处的三个选项时，2处的值会跟着变化

点击的时候根据选择的内容切换下面

可见，我们的接口被重新调起来了，底下的数据也发生了更新。

5、列表无限加载

首先，简单解释一下什么是列表无限加载，当我们的鼠标滚轮滑动到页面最底部时，浏览器会自动加载下一页的数据，然后将新老数据拼接在一起并渲染出来。详细实现步骤如下：

（1）绑定监听事件

  <div class="body" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
        <!-- 商品列表-->
        <GoodsItem v-for="goods in goodList" :goods="goods" :key="goods.id" />
      </div>

（2）编写逻辑代码

// 加载更多
const load = async () => {
  console.log('加载更多数据咯')
  // 获取下一页的数据
  reqData.value.page++
  const res = await getSubCategoryAPI(reqData.value)
  goodList.value = [...goodList.value, ...res.result.items]
  // 加载完毕 停止监听
  if (res.result.items.length === 0) {
    disabled.value = true
  }
}

当滚轮滑到页面底端时，浏览器返回

我们总不能一直让浏览器不停加载吧，那么，在这里，就需要我们判断一下什么时候停止加载？很显然，当所有的数据加载完毕时，我们就需要让浏览器停止加载。那么，我们怎么知道数据有没有被宣部加载完毕呢？根据浏览器返回的数据，我们可以推断出，当其中一条数据的某一项为空时，说明我们的数据就被加载完毕了，此时，我们可以将“disabled”属性设为true，让禁用加载生效。

当然，这里需要同时绑定禁用加载的事件。绑定完成之后，再进行这一操作。

先定义一个变量，用来存放控制加载暂停的开始与停止，

const disabled = ref(false)

当页面数据加载完毕时，将其值置为true

if (res.result.items.length === 0) {
    disabled.value = true
  }

6、定制路由滚动行为

目前的做法存在的问题是：当用户点击到某个二级分类下并往下浏览了一部分内容后，又想要到其它分类下去浏览其它商品，而此时，鼠标的滚轮还在页面中间显示，很显然，用户的体验不是很好。在这里，我们可以采用vue-router提供的一个叫scrollBehavior 配置项来简单优化一下，它可以指定路由切换时的滚动位置，让用户在不同路由切换的时候，可以自动滚动到页面的顶部，而不是停留在原先的位置（router/index.js)

 scrollBehavior () {
    return {
      top: 0
    }
  }