目的:实现结果区域商品展示。
大致步骤:
- 完成结果区域商品布局
- 完成 shop
-infinite-loading
组件封装 - 使用 shop
-infinite-loading
完成数据加载和渲染
落地代码:src/views/category/sub.vue
- 基础布局
<template>
<div class='sub-category'>
<div class="container">
<!-- 面包屑 -->
<SubBread />
<!-- 筛选区 -->
<SubFilter />
<!-- 结果区域 -->
<div class="goods-list">
<!-- 排序 -->
<SubSort />
<!-- 列表 -->
<ul>
<li v-for="i in 20" :key="i" >
<GoodsItem :goods="{}" />
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import SubBread from './components/sub-bread'
import SubFilter from './components/sub-filter'
import SubSort from './components/sub-sort'
import GoodsItem from './components/goods-item'
export default {
name: 'SubCategory',
components: { SubBread, SubFilter, SubSort, GoodsItem }
}
</script>
<style scoped lang='less'>
.goods-list {
background: #fff;
padding: 0 25px;
margin-top: 25px;
ul {
display: flex;
flex-wrap: wrap;
padding: 0 5px;
li {
margin-right: 20px;
margin-bottom: 20px;
&:nth-child(5n) {
margin-right: 0;
}
}
}
}
</style>
- 无限列表加载组件
src/components/shop-infinite-loading.vue
<template>
<div class="shop-infinite-loading" ref="container">
<div class="loading" v-if="loading">
<span class="img"></span>
<span class="text">正在加载...</span>
</div>
<div class="none" v-if="finished">
<span class="img"></span>
<span class="text">亲,没有更多了</span>
</div>
</div>
</template>
<script>
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
export default {
name: 'ShopInfiniteLoading',
props: {
loading: {
type: Boolean,
default: false
},
finished: {
type: Boolean,
default: false
}
},
setup (props, { emit }) {
const container = ref(null)
useIntersectionObserver(
container,
([{ isIntersecting }], dom) => {
if (isIntersecting) {
if (props.loading === false && props.finished === false) {
emit('infinite')
}
}
},
{
threshold: 0
}
)
return { container }
}
}
</script>
<style scoped lang='less'>
.shop-infinite-loading {
.loading {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
.img {
width: 50px;
height: 50px;
background: url(../../assets/images/load.gif) no-repeat center / contain;
}
.text {
color: #999;
font-size: 16px;
}
}
.none {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
.img {
width: 200px;
height: 134px;
background: url(../../assets/images/none.png) no-repeat center / contain;
}
.text {
color: #999;
font-size: 16px;
}
}
}
</style>
- 定义获取数据的API
src/api/category.js
/**
* 获取分类下的商品(带筛选条件)
* @param {Object} params - 可参考接口文档
*/
export const findSubCategoryGoods = (params) => {
return request('/category/goods/temporary', 'post', params)
}
- 在
src/views/category/sub.vue
使用组件
<!-- 结果区域 -->
<div class="goods-list">
<!-- 排序 -->
<GoodsSort />
<!-- 列表 -->
<ul>
<li v-for="item in list" :key="item.id" >
<GoodsItem :goods="item" />
</li>
</ul>
<!-- 加载 -->
+ <ShopInfiniteLoading :loading="loading" :finished="finished" @infinite="getData" />
</div>
<script>
import SubBread from './components/sub-bread'
import SubFilter from './components/sub-filter'
import SubSort from './components/sub-sort'
import GoodsItem from './components/goods-item'
import { ref, watch } from 'vue'
import { findSubCategoryGoods } from '@/api/category'
import { useRoute } from 'vue-router'
export default {
name: 'SubCategory',
components: { SubBread, SubFilter, SubSort, GoodsItem },
setup () {
// 1. 基础布局
// 2. 无限加载组件
// 3. 动态加载数据且渲染
// 4. 任何筛选条件变化需要更新列表
const route = useRoute()
const loading = ref(false)
const finished = ref(false)
const goodsList = ref([])
// 查询参数
let reqParams = {
page: 1,
pageSize: 20
}
// 获取数据函数
const getData = () => {
loading.value = true
reqParams.categoryId = route.params.id
findSubCategoryGoods(reqParams).then(({ result }) => {
if (result.items.length) {
goodsList.value.push(...result.items)
reqParams.page++
} else {
// 加载完毕
finished.value = true
}
// 请求结束
loading.value = false
})
}
// 切换二级分类重新加载
watch(() => route.params.id, (newVal) => {
if (newVal && route.path === ('/category/sub/' + newVal)) {
goodsList.value = []
reqParams = {
page: 1,
pageSize: 20
}
finished.value = false
}
})
return { loading, finished, goodsList, getData }
}
}
</script>