一、商品分类以及过渡动画
前提:组件必须要有v-if | v-show 才能实现过渡动画
<transition name="sort">
<div class="sort" v-show="show">
<div class="all-sort-list2">
<!--一级分类地盘-->
<div
class="item"
v-for="(c1, index) in category"
:key="c1.categoryId"
>
<h3
@mouseenter="enterHandler(index)"
:class="{ active: currentIndex == index }"
>
<a
:data-categoryName="c1.categoryName"
:data-category1Id="c1.categoryId"
>{{ c1.categoryName }}</a
>
</h3>
<!-- 通过JS实现动态行内样式,进行二级、三级分类的显示与隐藏(display:none|block切换的) -->
<div
class="item-list clearfix"
:style="{ display: currentIndex == index ? 'block' : 'none' }"
>
<!--二级分类-->
<div
class="subitem"
v-for="(c2) in c1.categoryChild"
:key="c2.categoryId"
>
<dl class="fore">
<dt>
<a
:data-categoryName="c2.categoryName"
:data-category2Id="c2.categoryId"
>{{ c2.categoryName }}</a
>
</dt>
<dd>
<!--三级分类-->
<em
v-for="(c3) in c2.categoryChild"
:key="c3.categoryId"
>
<a
:data-categoryName="c3.categoryName"
:data-category3Id="c3.categoryId"
>{{ c3.categoryName }}</a
>
</em>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</transition>
/*过渡动画:商品分类 进入阶段*/
//过渡动画的开始状态
.sort-enter {
height: 0px;
}
//自定义动画时间\速率
.sort-enter-active {
transition: all 0.3s;
}
//过渡动画结束状态(进入)
.sort-enter-to {
height: 461px;
}
二、typeNav商品分类的优化
mounted() {
//App的根组件挂载完毕,发一次请求即可.
//派发一个action ,获取商品分类的三级联动数组
this.$store.dispatch("getCategory");
},
三、合并参数
1.合并params和query参数
除了三级联动列表可以使得从home页跳转到search页,还有搜索栏可以。
//点击商品分类按钮的时候,如果路径当中携带params参数,需要合并携带给search模块
if (this.$route.params.keyword) {
locations.params = this.$route.params;
}
//目前商品分类这里携带参数只有query参数
this.$router.push(locations);
四、mock.js模拟数据
1.开发Home首页中的ListContainer组件和Floor组件
服务器返回的数据(接口)只有商品分类菜单分类数据,对于ListContainer组件和Floor组件服务器没有提供
Mock.js
(1)安装
npm install --save mock js
(2)模拟数据
①在项目当中src文件夹中创建mock文件夹
②准备JSON数据(mock文件夹中创建相应的JSON文件)—格式化,不能留有空格
③把mock文件需要的数据存放在public文件夹中,public文件夹在打包时,会把相应的资源原封不动地打包到dist文件夹中
④开始mock,创建mockServe.js
//引入mockjs插件开始模拟数据
import Mock from 'mockjs';
//引入数据:JSON数据格式数据
//比如:图片资源、JSON资源【里面不能书写export关键字】,这些资源默认对外暴露【默认暴露】
import banner from './banner.json';
import floor from './floor.json';
//接口:相当于nodejs里面中间件
//第一个参数:接口的地址 第二个参数:向这个接口发请求获取到的数据
//Mock插件:中间件默认是GET请求
Mock.mock("/mock/banner", { code: 200, data: banner });
//Mock插件:中间件默认是GET请求
Mock.mock('/mock/floor', { code: 200, data: floor });
⑤在main.js中引入
//引入mockServe文件,让咱们模拟接口跑起来
import "@/mock/mockServe.js";
2.获取Banner轮播图的数据
listContainer组件挂载完毕向仓库发送请求获取mock数据
// pages\home\listContainer\index.vue
//辅助函数获取仓库的数据
import { mapState } from "vuex";
computed: {
...mapState({
bannerList: (state) => state.home.bannerList,
}),
},
mounted() {
//派发action,通知vuex发请求,将数据存储在仓库中 去寻找相应的仓库
this.$store.dispatch("getBannerList");
},
home仓库定义相应的action函数
//仓库存储数据的地方
let state = {
//首页轮播图的数据
bannerList: [],
};
//可以处理业务逻辑【if、异步语句等等】
let actions = {
//获取banner图的action
async getBannerList({ commit, state, dispatch }) {
//获取首页轮播图数据
let result = await reqBannerList();
if (result.code == 200) {
// console.log('actions发请求')
commit("GETBANNERLIST", result.data);
}
}
};
//唯一可以修改仓库数据地方【工人】
let mutations = {
GETBANNERLIST(state, bannerList) {
state.bannerList = bannerList;
},
};