【小兔鲜】day02 Pinia、项目起步、Layout
1. Pinia
Pinia 是 Vue 的专属的最新状态管理库 ，是 Vuex 状态管理工具的替代品。
- 提供更加简单的API （去掉了 mutation ）
- 提供符合组合式风格的API （和 Vue3 新语法统一）
- 去掉了 modules 的概念，每一个 store 都是一个独立的模块
- 搭配 TypeScript 一起使用提供可靠的类型推断
2. 添加Pinia到Vue项目
官方文档 https://pinia.vuejs.org/zh/
1.安装Pinia
npm install pinia
(base) ➜ vue3-basic-project git:(complete) npm install pinia
added 18 packages, removed 4 packages, and changed 17 packages in 2s
23 packages are looking for funding
run `npm fund` for details
package.json
{
"name": "vue3-demo-template",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.1.3",
"element-plus": "^2.2.19",
"pinia": "^3.0.1",
"vue": "^3.2.41"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.1.2",
"mockjs": "^1.1.0",
"vite": "^3.1.8",
"vite-plugin-mock": "^2.9.6"
}
}
2.使用
创建一个 pinia 实例 (根 store) 并将其传递给应用：
main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')
3. 案例：Pinia-counter基础使用
使用Pinia实现计数器案例
import { defineStore } from 'pinia'
// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', {
// 其他配置...
})
3.1 Store 是什么？
Store (如 Pinia) 是一个保存状态和业务逻辑的实体，它并不与你的组件树绑定。换句话说，它承载着全局状态。它有点像一个永远存在的组件，每个组件都可以读取和写入它。它有三个概念，state、getter 和 action，我们可以假设这些概念相当于组件中的 data、 computed 和 methods。
3.2 应该在什么时候使用 Store?
一个 Store 应该包含可以在整个应用中访问的数据。这包括在许多地方使用的数据，例如显示在导航栏中的用户信息，以及需要通过页面保存的数据，例如一个非常复杂的多步骤表单。
另一方面，你应该避免在 Store 中引入那些原本可以在组件中保存的本地数据，例如，一个元素在页面中的可见性。
并非所有的应用都需要访问全局状态，但如果你的应用确实需要一个全局状态，那 Pinia 将使你的开发过程更轻松。
4. Pinia-getters和异步action
4.1 getters
Getter 完全等同于 store 的 state 的计算值。可以通过 defineStore() 中的 getters 属性来定义它们。推荐使用箭头函数，并且它将接收 state 作为第一个参数：
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
}),
getters: {
doubleCount: (state) => state.count * 2,
},
})
Pinia中的 getters 直接使用 computed函数进行模拟。
4.2 action如何实现异步
action中实现异步和组件中定义数据和方法的风格完全一致
5. storeToRefs
使用storeToRefs函数可以辅助保持数据(state + getter)的响应式解构
6. Pinia的调试
总结：
7. 项目初始化
(base) ➜ Documents npm init vue@latest
Need to install the following packages:
create-vue@3.16.3
Ok to proceed? (y) y
> npx
> create-vue
┌ Vue.js - The Progressive JavaScript Framework
│
◆ 请输入项目名称：
│ vue-project
◇ 请输入项目名称：
│ vue3-rabbit
│
◇ 请选择要包含的功能： (↑/↓ 切换，空格选择，a 全选，回车确认)
│ Router（单页面应用开发）, Pinia（状态管理）, ESLint（错误预防）
│
◇ 是否引入 Oxlint 以加快检测？（试验阶段）
│ No
正在初始化项目 /Users/fanzhen/Documents/vue3-rabbit...
│
└ 项目初始化完成，可执行以下命令：
cd vue3-rabbit
npm install
npm run dev
| 可选：使用以下命令在项目目录中初始化 Git：
git init && git add -A && git commit -m "initial commit"
7.1 src目录调整
7.2 别名路径联想设置
在编写代码的过程中，一旦 输入 @/ , VSCode会立刻 联想出src下的所有子目录和文件, 统一文件路径访问不容易出错。
如何进行配置
- 在项目的根目录下新增 jsconfig.json 文件
- 添加json格式的配置项，如下：
7.3 elementPlus自动按需导入配置
项目中使用到的组件：
- 通用性组件 ElementPlus
- 业务定制化组件(手写)
elementPlus官网 https://element-plus.org/zh-CN/
快速开始 https://cn.element-plus.org/zh-CN/guide/quickstart.html
安装
(base) ➜ vue3-rabbit git:(master) npm install element-plus --save
added 24 packages in 3s
74 packages are looking for funding
run `npm fund` for details
完整引入
如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
按需导入
您需要使用额外的插件来导入要使用的组件。
首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中
Vite
vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
这里我使用按需导入
(base) ➜ vue3-rabbit git:(master) npm install -D unplugin-vue-components unplugin-auto-import
added 35 packages in 2s
85 packages are looking for funding
run `npm fund` for details
vite.config.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
})
7.4 elementPlus主题色定制
为什么需要主题定制?
小兔鲜主题色和elementPlus默认的主题色存在冲突，通过定制主题让elementPlus的主题色和小兔鲜项目保持一致。
7.4.1 如何定制（scss变量替换方案）
1.首先安装sass
(base) ➜ vue3-rabbit git:(master) npm i sass -D
added 10 packages in 1s
89 packages are looking for funding
run `npm fund` for details
2.定制化文件样式
在新建目录的新建index.scss下
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'primary': (
// 主色
'base': #27ba9b,
),
'success': (
// 成功色
'base': #1dc779,
),
'warning': (
// 警告色
'base': #ffb302,
),
'danger': (
// 危险色
'base': #e26237,
),
'error': (
// 错误色
'base': #cf4444,
),
)
)
3. 自动导入配置
这里自动导入需要深入到elementPlus的组件中，按照官方的配置文档来
- 自动导入定制化样式文件进行样式覆盖
- 按需定制主题配置 （需要安装 unplugin-element-plus）
验证主题替换成功
8. axios基础配置
8.1 安装axios
npm i axios
官方文档地址：https://axios-http.com/zh/docs/intro
8.2 配置基础实例(统一接口配置)
http.js
// axios基础的封装
import axios from "axios";
const httpInstance = axios.create({
baseURL: "https://pcapi-xiaotuxian-front-devtest.itheima.net",
timeout: 5000,
});
// 拦截器
// axios请求拦截器
httpInstance.interceptors.request.use(
(config) => {
return config;
},
(e) => Promise.reject(e)
);
// axios响应式拦截器
httpInstance.interceptors.response.use(
(res) => res.data,
(e) => {
return Promise.reject(e);
}
);
export default httpInstance;
8.3 思考
9. 项目起步-项目整体路由设计
9.1 设计首页和登录页的路由（一级路由）
路由设计原则：找内容切换的区域，如果是页面整体切换，则为一级路由
9.2 小结
10. 静态资源引入和ErrorLen安装
10.1 静态资源
图片资源和样式资源
资源说明
- 实际工作中的图片资源通常由 UI设计师 提供，常见的图片格式有png,svg等都是由UI切图交给前端
- 样式资源通常是指项目初始化的时候进行样式重置，常见的比如开源的 normalize.css 或者手写
资源操作
- 图片资源 - 把
mages 文件夹放到 assets目录下 - 样式资源 - 把
common.scss 文件放到 styles目录下
10.2 error lens 安装
error lens是一个实时提供错误警告信息的VSCode插件，方便开发
11. scss文件的自动导入
为什么要自动导入？！
在项目里一些组件共享的色值会以scss变量的方式统一放到一个名为var.scss的文件中，正常组件中使用，需要先导
入scss文件，再使用内部的变量，比较繁琐，自动导入可以免去手动导入的步骤，直接使用内部的变量。
11.1 自动导入配置
- 新增一个 var.scss 文件，存入色值变量
- 通过 vite.config.js 配置自动导入文件
12. Layout-静态模版结构搭建
Layout模块静态模版搭建
- 在Layout下新建components包，然后再这个包下面新建
LayoutFooter.vue、LayoutHeader.vue、LayoutNav.vue - 在Layout下的index.vue中引入上面3个vue文件
效果：
13. Layout-字体图标引入
如何引入？
阿里的字体图标库支持多种引入方式，小兔鲜项目里采用的是 font-class引用 的方式
在index.html引入
<link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
其他vue使用它
14. 一级导航渲染
功能描述
使用后端接口渲染渲染一级路由导航
实现步骤
- 根据接口文档封装接口函数
- 发送请求获取数据列表
- v-for渲染页面
接口请求结果的JSON
https://pcapi-xiaotuxian-front-devtest.itheima.net/home/category/head GET请求
{
"code": "1",
"msg": "操作成功",
"result": [
{
"id": "1005000",
"name": "居家",
"picture": "http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-05-06/201516e3-25d0-48f5-bcee-7f0cafb14176.png",
"children": [
{
"id": "1005999003",
"name": "居家生活用品",
"picture": "http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/7f6a7b20-7902-4b43-b9c5-f33151ef1334.jpg?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "1008017",
"name": "收纳",
"picture": "https://yanxuan.nosdn.127.net/366989e4d730594e86fcd60b5ab19acc.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "1017000",
"name": "宠物食品",
"picture": "https://yanxuan.nosdn.127.net/b42a85ef15f856081ea9f49e5f6893e2.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109243003",
"name": "艺术藏品",
"picture": "https://yanxuan.nosdn.127.net/9544b81aaa14c26a8038c2365ff3c2bc.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109248004",
"name": "宠物用品",
"picture": "https://yanxuan.nosdn.127.net/e766b09029ca00680d1e651b5cdc42bd.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109293000",
"name": "家庭医疗",
"picture": "https://yanxuan.nosdn.127.net/3f34039fa8c26e18e2f4fc96ed8cb6de.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109308000",
"name": "中医保健",
"picture": "https://yanxuan.nosdn.127.net/2bfba997fd031317caecc4f0bad17569.png?quality=95&imageView",
"children": null,
"goods": null
}
],
"goods": [
{
"id": "3997602",
"name": "暖腰暖腹暖胃，蕲艾暖宫腰带",
"desc": "暖宫暖腰暖胃，大面积热敷≈3片暖宝宝",
"price": "49.00",
"picture": "https://yanxuan-item.nosdn.127.net/9892cc73945da1591fa5259ad076b23c.jpg",
"orderNum": null
},
{
"id": "3995284",
"name": "新年佳礼，家用SPA多功能按摩床垫",
"desc": "坐卧两用，随时随地做spa，多个场合随你心意",
"price": "599.00",
"picture": "https://yanxuan-item.nosdn.127.net/c41003c6df90d7673195dcc2482e13f3.jpg",
"orderNum": null
},
{
"id": "3993828",
"name": "七夕礼物·姐姐同款，穿出自信体态矫姿带",
"desc": "背薄一寸，年轻十岁，时尚百搭，约会职场小心机",
"price": "159.00",
"picture": "https://yanxuan-item.nosdn.127.net/a6939f41c48fa9e9c8f7a7ed855351f1.jpg",
"orderNum": null
},
{
"id": "3993481",
"name": "带提手可站立炫彩硅胶热水袋",
"desc": "杯型式设计，轻松注水防烫伤",
"price": "35.00",
"picture": "https://yanxuan-item.nosdn.127.net/0b120e1c37f312981f4f2242997cc862.png",
"orderNum": null
},
{
"id": "3992367",
"name": "七夕礼物·挺拔身姿，隐形内穿矫姿带",
"desc": "众筹爆品回归，专注矫姿20年，轻松矫正身姿",
"price": "149.00",
"picture": "https://yanxuan-item.nosdn.127.net/7d1bc78607a08c088b2a7cdbe88c05af.png",
"orderNum": null
},
{
"id": "3991840",
"name": "消炎镇痛一贴灵医用冷敷贴60贴/盒",
"desc": "mini型尺寸设计性价比更高",
"price": "79.00",
"picture": "https://yanxuan-item.nosdn.127.net/d3807695c7d42a0247e308a936201d7c.jpg",
"orderNum": null
},
{
"id": "3987204",
"name": "真空拔罐器",
"desc": "居家养生必备超简便拔罐套装",
"price": "49.00",
"picture": "https://yanxuan-item.nosdn.127.net/16222847be7d090eb538a944a7e0b01b.jpg",
"orderNum": null
},
{
"id": "3986121",
"name": "艾灸理疗随时随地，灸疗装置8头/12头",
"desc": "哪里不适灸哪里，全身都可灸",
"price": "99.00",
"picture": "https://yanxuan-item.nosdn.127.net/941abaee58a88cb104228fe2c4cfdeb1.png",
"orderNum": null
},
{
"id": "3997974",
"name": "入门首选，语音播报电子血压计",
"desc": "全程语音指导，一键测量，监测心率，贴心守护爸妈健康",
"price": "109.00",
"picture": "https://yanxuan-item.nosdn.127.net/8f0c15f981c5cbcb1aa17215a259fa62.png",
"orderNum": null
}
]
},
{
"id": "1005002",
"name": "美食",
"picture": "http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-05-06/cf82e5b4-bf1b-4c68-aa86-96f66e8e5282.png",
"children": [
{
"id": "1005012",
"name": "南北干货",
"picture": "https://yanxuan.nosdn.127.net/9af51a1090fd32f668b14451f06d6e72.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "1036003",
"name": "调味酱菜",
"picture": "https://yanxuan.nosdn.127.net/5fae33a840870b487cc903535383bf97.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109201001",
"name": "方便食品",
"picture": "https://yanxuan.nosdn.127.net/f9872b4aad6c0a943d45629ac96ee8d3.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109206007",
"name": "米面粮油",
"picture": "https://yanxuan.nosdn.127.net/8578759aed2268f7aa8641273cac7cb3.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109264007",
"name": "名酒馆",
"picture": "https://yanxuan.nosdn.127.net/91413b1476a0697bb0592609a42d4498.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109285003",
"name": "进口酒",
"picture": "https://yanxuan.nosdn.127.net/bf705060f01b60fe9c11c345931b1891.png?quality=95&imageView",
"children": null,
"goods": null
}
],
"goods": [
{
"id": "1270008",
"name": "黄金玉粟粥米500克",
"desc": "谷物缤纷，香甜软糯",
"price": "9.90",
"picture": "https://yanxuan-item.nosdn.127.net/5f62c7ab543b1152383a0e9941c09bfd.png",
"orderNum": null
},
{
"id": "1269010",
"name": "什锦素食粥米500克",
"desc": "谷香米糯，营养美味",
"price": "9.90",
"picture": "https://yanxuan-item.nosdn.127.net/dc4826ddb838d8e17f90402adfa3f4fe.png",
"orderNum": null
},
{
"id": "1135081",
"name": "紫米410克",
"desc": "一年一熟的御田胭脂米",
"price": "19.00",
"picture": "https://yanxuan-item.nosdn.127.net/a3c0bb3be38ccf510ecaedb81f5bcd9f.png",
"orderNum": null
},
{
"id": "1135080",
"name": "加量50%不加价，贵州兴仁薏仁米600克",
"desc": "粒粒饱满，颗颗香糯",
"price": "19.00",
"picture": "https://yanxuan-item.nosdn.127.net/3e93790bba8db8aab54ee5ba72799567.png",
"orderNum": null
},
{
"id": "1135079",
"name": "免浸泡，12种谷物一次同享，五谷米400克",
"desc": "无需浸泡，同煮同熟",
"price": "9.90",
"picture": "https://yanxuan-item.nosdn.127.net/bfe70bd66efe94f2f18061c707d2a097.png",
"orderNum": null
},
{
"id": "1135077",
"name": "加量45%不加价，内蒙古赤峰黄小米700克",
"desc": "赤峰好谷，米香浓郁",
"price": "19.00",
"picture": "https://yanxuan-item.nosdn.127.net/564eb51c22d898179b468f5dec52d502.png",
"orderNum": null
},
{
"id": "1135076",
"name": "红小豆450克*3袋",
"desc": "皮薄易煮，粒粒香甜",
"price": "19.00",
"picture": "https://yanxuan-item.nosdn.127.net/eaec90be370a438e565e10189b7a390a.png",
"orderNum": null
},
{
"id": "1135075",
"name": "来自东北的“黑珍珠”，黑米470克*3袋",
"desc": "米汁香稠，Q弹醇香",
"price": "19.00",
"picture": "https://yanxuan-item.nosdn.127.net/1452cfeb14b5d252fb1ba97b278e9cc3.png",
"orderNum": null
},
{
"id": "3464033",
"name": "冻干藤椒豚骨面74克*12盒",
"desc": "日式风味，汤浓肉鲜，椒麻过瘾",
"price": "79.00",
"picture": "https://yanxuan-item.nosdn.127.net/7a5ffe313fe5671709d5a9826f5a83a2.jpg",
"orderNum": null
}
]
},
{
"id": "1010000",
"name": "服饰",
"picture": "http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-05-06/33e1f5de-0fdb-4cfa-9ba9-781233024b53.png",
"children": [
{
"id": "109303000",
"name": "钱包/胸包",
"picture": "https://yanxuan.nosdn.127.net/237613bc9c22eb422dade63e3ed7c61a.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109311005",
"name": "女式靴子",
"picture": "https://yanxuan.nosdn.127.net/62c5dacf3e0cbe8e4188ccd263358d1a.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109311006",
"name": "女式休闲鞋",
"picture": "https://yanxuan.nosdn.127.net/8cd3a76ffffb14e9fe92ad2369117af0.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109311007",
"name": "女式运动鞋",
"picture": "https://yanxuan.nosdn.127.net/7be561f2ddc2179a7e116c413636eba9.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109315000",
"name": "11.11购物狂欢",
"picture": "https://yanxuan.nosdn.127.net/b29297263032957553d7153b309db74b.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109318003",
"name": "【年末狂欢季】",
"picture": "https://yanxuan.nosdn.127.net/8f8092d5bf6a133a8cb59ab7b9f790e9.png?quality=95&imageView",
"children": null,
"goods": null
}
],
"goods": [
{
"id": "1621018",
"name": "懒人瘦出好身材，多功能甩脂塑形机",
"desc": "懒人福音居家轻松塑身",
"price": "589.00",
"picture": "https://yanxuan-item.nosdn.127.net/540f84174dbf9b98d4072abbd886819e.png",
"orderNum": null
},
{
"id": "1593000",
"name": "软糯似baby肌肤，男式高领纯小山羊绒衫",
"desc": "绒毛取自未满1岁的山羊羊羔",
"price": "559.00",
"picture": "https://yanxuan-item.nosdn.127.net/06156761337ba0fd1f8f51470f698b5f.png",
"orderNum": null
},
{
"id": "1555000",
"name": "舒眠真丝眼罩",
"desc": "顺滑真丝，感受舒适睡眠",
"price": "79.00",
"picture": "https://yanxuan-item.nosdn.127.net/85432452d5f40c4798c08f1f0beb4a43.png",
"orderNum": null
},
{
"id": "1436033",
"name": "柔软透气，女式精梳棉内裤6条装",
"desc": "爱慕供应商柔软透气",
"price": "125.00",
"picture": "https://yanxuan-item.nosdn.127.net/dc30e9603306e59d959e7fac6968244e.jpg",
"orderNum": null
},
{
"id": "1281002",
"name": "轻灵碳素耐用型羽毛球拍单双拍",
"desc": "超轻球拍，运动随心",
"price": "119.00",
"picture": "https://yanxuan-item.nosdn.127.net/89cc3ab3e332bb1df5dc20241b5ca4bb.png",
"orderNum": null
},
{
"id": "4001285",
"name": "英伦长柄自动晴雨伞",
"desc": "雨天有情调，英伦风设计，给你好品味",
"price": "40.90",
"picture": "https://yanxuan-item.nosdn.127.net/e77b8f4a8ddd1e777394d84347859f7c.png",
"orderNum": null
},
{
"id": "4001126",
"name": "瑜伽裸感女式运动训练紧身裤",
"desc": "面料韧性足，修身又舒适",
"price": "83.90",
"picture": "https://yanxuan-item.nosdn.127.net/872275c2e2edacc917e0364065c90121.png",
"orderNum": null
},
{
"id": "4000914",
"name": "恍若没穿鞋，女式轻软舒弹健步鞋2.0",
"desc": "宛若没穿鞋的轻盈，体验更自由的奔跑",
"price": "159.00",
"picture": "https://yanxuan-item.nosdn.127.net/feec7bde4d52521ae70ab4c5010ce992.png",
"orderNum": null
},
{
"id": "4000620",
"name": "「一件三穿好过冬」男中长款鹅绒防水外套",
"desc": "一件衣服三种穿法，应对多变天气",
"price": "659.00",
"picture": "https://yanxuan-item.nosdn.127.net/aa9e03278e3274a2a83f3f8e7df5ee6f.png",
"orderNum": null
}
]
},
{
"id": "1011000",
"name": "母婴",
"picture": "http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-05-06/b514a526-4010-4ce8-8cb9-757ed382f84a.png",
"children": [
{
"id": "1020003",
"name": "T恤/polo/衬衫",
"picture": "https://yanxuan.nosdn.127.net/1f0089afcec911db7202fbcdae57d5f8.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "1037006",
"name": "儿童鞋",
"picture": "https://yanxuan.nosdn.127.net/7fd14a409302391da16970981cacd336.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109243018",
"name": "外套/套装",
"picture": "https://yanxuan.nosdn.127.net/773a8777f66c286f97af6d74a27d7fe1.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109243019",
"name": "裤子/裙装",
"picture": "https://yanxuan.nosdn.127.net/a8c52cea5f953019484a74883ad8f14b.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109243021",
"name": "连体衣/礼盒",
"picture": "https://yanxuan.nosdn.127.net/773677cc0922628152a9b3cbd862426f.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109243022",
"name": "学步鞋",
"picture": "https://yanxuan.nosdn.127.net/9a50280bb69e1c12f557f601cce1c480.png?quality=95&imageView",
"children": null,
"goods": null
}
],
"goods": [
{
"id": "4027473",
"name": "新款LOGO印花时尚学步叫叫鞋",
"desc": "软底包头叫叫鞋",
"price": "259.00",
"picture": "https://yanxuan-item.nosdn.127.net/841d7669e6cc23cb249f47d8d39fc17c.jpg",
"orderNum": null
},
{
"id": "4027466",
"name": "儿童气泵软底学步二阶段学步鞋",
"desc": "气泵大底学步鞋",
"price": "239.00",
"picture": "https://yanxuan-item.nosdn.127.net/19bedfd20a12842b5d7f7b909a62e877.jpg",
"orderNum": null
},
{
"id": "4023738",
"name": "舒适软弹，糖果色儿童网孔透气运动鞋25-30",
"desc": "防踢鞋头，透气网孔更舒适",
"price": "139.00",
"picture": "https://yanxuan-item.nosdn.127.net/c437179bc1d0d5ad77a79f15a5c6f166.png",
"orderNum": null
},
{
"id": "4023641",
"name": "防踢鞋头，儿童学步健康机能鞋21-30",
"desc": "包头防踢用心呵护",
"price": "129.00",
"picture": "https://yanxuan-item.nosdn.127.net/33ba674fbb13e2380ee8a74371eacf43.jpg",
"orderNum": null
},
{
"id": "4023638",
"name": "抓绒保暖，毛毛虫儿童运动鞋26-30",
"desc": "宝贝上脚活力出街",
"price": "109.00",
"picture": "https://yanxuan-item.nosdn.127.net/d917c92e663c5ed0bb577c7ded73e4ec.png",
"orderNum": null
},
{
"id": "4007784",
"name": "婴幼儿童透气网面学步鞋小童鞋4-6码",
"desc": "优质透气网布鞋面，轻盈自在",
"price": "119.00",
"picture": "https://yanxuan-item.nosdn.127.net/a9f428091f172db89977a511f6639fec.jpg",
"orderNum": null
},
{
"id": "3998535",
"name": "学步更自如，婴幼童机能学步鞋4-6码",
"desc": "宝宝的第一双鞋，成长不将就",
"price": "109.00",
"picture": "https://yanxuan-item.nosdn.127.net/ef01de6dfac9cc4c548f317f2feddafe.jpg",
"orderNum": null
},
{
"id": "3995013",
"name": "时髦出街更亮眼，儿童休闲老爹鞋21-26码",
"desc": "高弹鞋底，行走脚感舒适",
"price": "109.00",
"picture": "https://yanxuan-item.nosdn.127.net/088c9f9208b82fa4777336d22faa919d.jpg",
"orderNum": null
},
{
"id": "4023751",
"name": "释放可爱天性，棉毛布造型领哈衣59-90cm",
"desc": "A类婴幼儿标准，安全放心",
"price": "62.00",
"picture": "https://yanxuan-item.nosdn.127.net/5e2b5629af983dadbceed483dd677eeb.jpg",
"orderNum": null
}
]
},
{
"id": "1013001",
"name": "个护",
"picture": "http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-05-06/d38a73b8-cd03-48aa-a60b-e7c4e16667ed.png",
"children": [
{
"id": "1009000",
"name": "家庭清洁",
"picture": "https://yanxuan.nosdn.127.net/718318c0d3b55d011fcb7c7c843902ce.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "1020002",
"name": "浴室用品",
"picture": "https://yanxuan.nosdn.127.net/dfb6142de1bd2f59b251eb8f7c7ea2fb.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109243016",
"name": "餐厨清洁",
"picture": "https://yanxuan.nosdn.127.net/55d927e337c1f6d394359e99ef72a621.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109256012",
"name": "纸品",
"picture": "https://yanxuan.nosdn.127.net/07fef43b0d14882d6662233ab30dc588.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109256013",
"name": "干湿巾",
"picture": "https://yanxuan.nosdn.127.net/985897ea31fdfc159e12696f4dbb4c13.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109261055",
"name": "毛巾浴巾",
"picture": "https://yanxuan.nosdn.127.net/949c5f8b077cf386ff9f1f18bec3408b.png?quality=95&imageView",
"children": null,
"goods": null
}
],
"goods": [
{
"id": "3987992",
"name": "【新疆棉】简约山形纹全棉提花毛巾",
"desc": "新疆长绒棉毛巾，吸水好颜值高",
"price": "18.50",
"picture": "https://yanxuan-item.nosdn.127.net/e0cea368f41da1587b3b7fc523f169d7.png",
"orderNum": null
},
{
"id": "3436033",
"name": "1件装【新疆棉】云珍·轻软旅行长绒棉方巾",
"desc": "轻巧无捻小方巾，旅行便携",
"price": "7.90",
"picture": "https://yanxuan-item.nosdn.127.net/99c83709ca5f9fd5c5bb35d207ad7822.png",
"orderNum": null
},
{
"id": "1436010",
"name": "囤货装云珍·轻软旅行长绒棉毛巾6条装",
"desc": "触碰云软，热销50万条",
"price": "139.00",
"picture": "https://yanxuan-item.nosdn.127.net/f4ed2e5d7b268bb270bce9ce63122ec0.jpg",
"orderNum": null
},
{
"id": "1129016",
"name": "【新疆棉】快速擦干，阿瓦提长绒棉毛巾",
"desc": "瞬间吸水，亲肤近0掉毛率",
"price": "16.90",
"picture": "https://yanxuan-item.nosdn.127.net/2f4ff18d601494cb7805ee099ed8a50f.png",
"orderNum": null
},
{
"id": "1021000",
"name": "厚厚一按就干爽，埃及进口长绒棉毛巾",
"desc": "厚实大毛圈，干爽瞬吸",
"price": "16.90",
"picture": "https://yanxuan-item.nosdn.127.net/a5c5398a7c033edb8a052fe1fddf8a81.png",
"orderNum": null
},
{
"id": "1009026",
"name": "【新疆棉】云珍·轻软长绒棉浴巾",
"desc": "云朵般轻软，至柔至软",
"price": "129.00",
"picture": "https://yanxuan-item.nosdn.127.net/957d7a338fc0de044965cc279fce68b2.png",
"orderNum": null
},
{
"id": "1006051",
"name": "【新疆棉】云珍·轻软旅行长绒棉毛巾",
"desc": "轻软亲肤，热销50万条",
"price": "31.90",
"picture": "https://yanxuan-item.nosdn.127.net/2a16452169f9d2e8841ddef76fdd684a.png",
"orderNum": null
},
{
"id": "1006029",
"name": "【新疆棉】宝宝也能用，全棉华夫格毛巾",
"desc": "空气华夫格，自然新疆棉",
"price": "15.90",
"picture": "https://yanxuan-item.nosdn.127.net/3480e3fa68b810f23afb43f6bf2fe45b.png",
"orderNum": null
},
{
"id": "3465081",
"name": "清洁养护一片搞定皮革护理湿巾",
"desc": "一擦如新懒人必备",
"price": "9.90",
"picture": "https://yanxuan-item.nosdn.127.net/bc32744cdf844b5136d3d84b0e6ba9d4.jpg",
"orderNum": null
}
]
},
{
"id": "1019000",
"name": "严选",
"picture": "http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-05-06/4b02f01f-a365-4b6c-9f7a-8b0f591dda02.png",
"children": [
{
"id": "1065004",
"name": "滋补保健",
"picture": "https://yanxuan.nosdn.127.net/1e619a2b22f40bf83070e6f8f6e0c8ff.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109256014",
"name": "床品家纺",
"picture": "https://yanxuan.nosdn.127.net/e6580910c1f98ed61bda867aeaf07929.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109256015",
"name": "锅具配件",
"picture": "https://yanxuan.nosdn.127.net/50ccbf04857e86cccf44d25da0577deb.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109275000",
"name": "清洁用品",
"picture": "https://yanxuan.nosdn.127.net/926d919bc3e95f5c93dc5dc973faa378.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109309012",
"name": "个护电器",
"picture": "https://yanxuan.nosdn.127.net/7a0eea3c515ad247c092749bcdd29855.png?quality=95&imageView",
"children": null,
"goods": null
}
],
"goods": [
{
"id": "4000009",
"name": "医美级冰脱韩国Ulike蓝宝石脉冲光脱毛仪",
"desc": "蓝宝石冰点脱毛，高效更持久",
"price": "1599.00",
"picture": "https://yanxuan-item.nosdn.127.net/3567b2ac2526e6b89124f3fb62fd09d3.png",
"orderNum": null
},
{
"id": "4027998",
"name": "亮碟多效合一洗涤块495g",
"desc": "洗碗机专用，强力去污",
"price": "69.90",
"picture": "https://yanxuan-item.nosdn.127.net/e07c2b63765cf9f4a46d489c6e09c1c1.jpg",
"orderNum": null
},
{
"id": "4017718",
"name": "油污克星Mootaa重油污清洁剂",
"desc": "一喷快速溶解油污",
"price": "26.90",
"picture": "https://yanxuan-item.nosdn.127.net/53a1579ead54c61a9b296d20c78a67ff.jpg",
"orderNum": null
},
{
"id": "4010699",
"name": "除味净化神器Mootaa冰箱抑菌清洁剂250ml",
"desc": "除臭杀毒，持久保鲜，解决冰箱各种食材串味产生的难闻气味",
"price": "35.00",
"picture": "https://yanxuan-item.nosdn.127.net/838c1b94f15e3b200bea21cef8989592.png",
"orderNum": null
},
{
"id": "3999485",
"name": "意大利大公鸡管家重油污克星清洁剂625ml",
"desc": "强效去污，操作便捷",
"price": "39.00",
"picture": "https://yanxuan-item.nosdn.127.net/6a669deef604cd8f080991b3207a3078.png",
"orderNum": null
},
{
"id": "3998109",
"name": "强力去垢不伤锅天然棕榈清洁刷长/短款",
"desc": "短柄针对顽渍，长柄清洁死角",
"price": "8.00",
"picture": "https://yanxuan-item.nosdn.127.net/7537da93f26f0303d94c59f3889836ed.png",
"orderNum": null
},
{
"id": "3990408",
"name": "1滴强力去污澳洲超浓缩不伤手洗洁精400ml",
"desc": "温和高效去污，一瓶可作多用",
"price": "17.90",
"picture": "https://yanxuan-item.nosdn.127.net/9ffdc0b1f6dbbe2e9f10a187444c01a3.png",
"orderNum": null
},
{
"id": "3990343",
"name": "【囤货装】日本橙油精华去油污泡沫3瓶装",
"desc": "强力除油污，萃取橙油精华",
"price": "67.50",
"picture": "https://yanxuan-item.nosdn.127.net/188e05584a056b0e2f17e8c568da8c00.png",
"orderNum": null
},
{
"id": "4023839",
"name": "日本冰块冰球制冰模具",
"desc": "轻轻一拍，轻松取冰",
"price": "29.80",
"picture": "https://yanxuan-item.nosdn.127.net/2be38fc160992fe41f7d4a45bd0f90e5.png",
"orderNum": null
}
]
},
{
"id": "1043000",
"name": "数码",
"picture": "http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-05-06/9660870d-6a59-4624-8064-b3a8cbf50d5c.png",
"children": [
{
"id": "1008006",
"name": "影音娱乐",
"picture": "https://yanxuan.nosdn.127.net/f5797ca77cfe413e7753ec69f9bd4bb1.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "1022000",
"name": "3C数码",
"picture": "https://yanxuan.nosdn.127.net/99b8f97b2e5449606fd558574aa15982.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "1028001",
"name": "乐器",
"picture": "https://yanxuan.nosdn.127.net/da0ac345e98c04594b697b56ebc373a5.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109243035",
"name": "手机配件",
"picture": "https://yanxuan.nosdn.127.net/0276d68f4b7a03bbd16675ada6e707ff.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109243036",
"name": "车载用品",
"picture": "https://yanxuan.nosdn.127.net/3f45fbcdac7e8532b6a1570e6d7fe171.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109243046",
"name": "办公文具",
"picture": "https://yanxuan.nosdn.127.net/801583d2f58274b13dc6a03daed1c3c9.png?quality=95&imageView",
"children": null,
"goods": null
}
],
"goods": [
{
"id": "3529022",
"name": "书源彩色按动中性笔",
"desc": "化繁为简，书写本源",
"price": "13.90",
"picture": "https://yanxuan-item.nosdn.127.net/21216556e7d47a4e4277dcb36a16a486.png",
"orderNum": null
},
{
"id": "3506005",
"name": "意外设计小时光便携钢笔",
"desc": "精致与优雅随身藏\n4.16-4.19号停止发货",
"price": "328.00",
"picture": "https://yanxuan-item.nosdn.127.net/f3636b063dad944aa527e4652392a553.png",
"orderNum": null
},
{
"id": "3499024",
"name": "创意金属立体拼酷模型",
"desc": "凤舞龙翔呈现华丽视觉",
"price": "158.00",
"picture": "https://yanxuan-item.nosdn.127.net/f3784ed01706f2f2722f12410a6429c9.png",
"orderNum": null
},
{
"id": "3468024",
"name": "意外设计便携钢笔花信礼盒",
"desc": "生活的美，诗人的心\n4.16-4.19号停止发货",
"price": "398.00",
"picture": "https://yanxuan-item.nosdn.127.net/cc1c57b701f202bc585d8fff3b65571e.png",
"orderNum": null
},
{
"id": "1512000",
"name": "用心记录每一句诗，飞鸟集钢笔本册文具礼盒",
"desc": "谱写情谊之歌",
"price": "89.00",
"picture": "https://yanxuan-item.nosdn.127.net/3892e311f3494d2bcc2c1f8ed9e34271.png",
"orderNum": null
},
{
"id": "1458011",
"name": "谱写爱的篇章，莫扎特钢笔墨水礼盒",
"desc": "谱写爱的乐章",
"price": "88.00",
"picture": "https://yanxuan-item.nosdn.127.net/b20165617d2f901e9ad926f39b737e87.png",
"orderNum": null
},
{
"id": "1111002",
"name": "剪出精致感，金致圆柄复古剪刀",
"desc": "轻薄设计，简约大方",
"price": "9.90",
"picture": "https://yanxuan-item.nosdn.127.net/4c6a9c8a579b00e5e9c7b002d15a33a2.jpg",
"orderNum": null
},
{
"id": "3994432",
"name": "平台严选x敦煌博物馆鹿游仙踪植萃车载香氛",
"desc": "复古敦煌色系，植萃天然香氛，安全健康孕婴可用",
"price": "33.90",
"picture": "https://yanxuan-item.nosdn.127.net/15db90ea8c8c7456c1fee4e18abb25da.png",
"orderNum": null
},
{
"id": "3992720",
"name": "旅途手机好伴侣，三合一车载手机支架",
"desc": "带安全锤和应急割刀的手机支架",
"price": "49.00",
"picture": "https://yanxuan-item.nosdn.127.net/2245a3d6898361236babb66d834e19c8.jpg",
"orderNum": null
}
]
},
{
"id": "109243029",
"name": "运动",
"picture": "http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-05-06/7d19752c-baff-49b6-bd02-5ece1d729214.png",
"children": [
{
"id": "109312000",
"name": "健身大器械",
"picture": "https://yanxuan.nosdn.127.net/6a1d37ffb2e28622a71e3c4415eaee35.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109312001",
"name": "健身小器械",
"picture": "https://yanxuan.nosdn.127.net/8c9f060e6fddb2b75af851a9a2c60087.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109312002",
"name": "城市出行",
"picture": "https://yanxuan.nosdn.127.net/b41b50710c3823f44a9f5b549a67ca81.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109312003",
"name": "运动护具",
"picture": "https://yanxuan.nosdn.127.net/ef9bcb99d88b3a1cfd9d2e120c158c21.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109313000",
"name": "垂钓",
"picture": "https://yanxuan.nosdn.127.net/c4eeeae307d0562cf3e95303146282b2.png?quality=95&imageView",
"children": null,
"goods": null
},
{
"id": "109313003",
"name": "户外装备",
"picture": "https://yanxuan.nosdn.127.net/6bbd92c68741c857d842f0afd1c7bdd5.png?quality=95&imageView",
"children": null,
"goods": null
}
],
"goods": [
{
"id": "3996603",
"name": "飞宇出游拍摄防抖神器手机稳定器",
"desc": "小巧便携，三轴防抖，模式随心选",
"price": "439.00",
"picture": "https://yanxuan-item.nosdn.127.net/2d0a47a51fa4b3e3857f2010bd83bead.jpg",
"orderNum": null
},
{
"id": "3995454",
"name": "黑科技专利款100%防水保暖针织毛线帽",
"desc": "黑科技专利，做到真正的保暖防水",
"price": "135.00",
"picture": "https://yanxuan-item.nosdn.127.net/3683d874b9623434a10b4ab0c2e6be9f.png",
"orderNum": null
},
{
"id": "3994572",
"name": "伊海诗冬日出行多功能防风保暖围脖",
"desc": "时尚针织印花面料，多种穿戴方式，正反两穿，亲肤保暖",
"price": "35.00",
"picture": "https://yanxuan-item.nosdn.127.net/25effebb31ea6fc58b92f5a6aecda8b9.png",
"orderNum": null
},
{
"id": "3994179",
"name": "运动健身跑步腰包",
"desc": "防水反光设计，大容量双口袋收纳，运动跑步更时尚",
"price": "40.00",
"picture": "https://yanxuan-item.nosdn.127.net/610a693cfd6f01adc6923dc1c0ec91aa.jpg",
"orderNum": null
},
{
"id": "3993694",
"name": "可触屏户外出行手套-合集",
"desc": "户外轻松骑行",
"price": "69.00",
"picture": "https://yanxuan-item.nosdn.127.net/264df9f0faddb60e88a8b108058d25e6.png",
"orderNum": null
},
{
"id": "3988016",
"name": "户外快干轻巧遮阳帽",
"desc": "有效遮阳，可折叠收纳",
"price": "44.00",
"picture": "https://yanxuan-item.nosdn.127.net/310eac832a1d90fbea41c4e6a9e604e4.png",
"orderNum": null
},
{
"id": "3987478",
"name": "可折叠户外防紫外线鸭舌帽",
"desc": "可折叠，透气网纱棒球帽",
"price": "44.00",
"picture": "https://yanxuan-item.nosdn.127.net/87fbba3cf009e5b69dd14781c594ef79.png",
"orderNum": null
},
{
"id": "3550194",
"name": "防晒快干长檐棒球帽",
"desc": "遮阳防晒,保暖新潮",
"price": "69.00",
"picture": "https://yanxuan-item.nosdn.127.net/7d0b373a6a63882783202c836bae264d.png",
"orderNum": null
},
{
"id": "4026116",
"name": "探险者黑胶防晒防雨遮阳伞户外钓鱼伞",
"desc": "防雨遮阳隔绝紫外线",
"price": "169.00",
"picture": "https://yanxuan-item.nosdn.127.net/66090c5de391e43e4516601e14870842.jpg",
"orderNum": null
}
]
},
{
"id": "19999999",
"name": "杂项",
"picture": "http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-05-06/4ff20b9e-8150-4bd3-87a3-0cd6766938dd.png",
"children": [
{
"id": "19999999001",
"name": "家庭清洁杂项",
"picture": "https://yanxuan.nosdn.127.net/718318c0d3b55d011fcb7c7c843902ce.png?quality=95&imageView",
"children": null,
"goods": null
}
],
"goods": [
{
"id": "1589017",
"name": "分场景使用不污染，超细纤维抹布分类5件套",
"desc": "精细分工，洁净家居",
"price": "14.90",
"picture": "https://yanxuan-item.nosdn.127.net/c520bba8209bae877158e8810d889aca.png",
"orderNum": null
},
{
"id": "1548001",
"name": "添加茂金属更强韧，金属色垃圾袋",
"desc": "3卷90只，茂金属添加，柔韧加倍",
"price": "8.90",
"picture": "https://yanxuan-item.nosdn.127.net/251393c0d8db7b0b594ccf86f1e796d0.png",
"orderNum": null
},
{
"id": "1540017",
"name": "随用随丢，懒人真爱地板清洁/除菌湿巾",
"desc": "材质加厚，耐磨珍珠纹",
"price": "8.90",
"picture": "https://yanxuan-item.nosdn.127.net/4c8a1cf2b8e40c250870491307dde11f.jpg",
"orderNum": null
},
{
"id": "1525018",
"name": "灰尘毛发静电吸附地板除尘干巾40片/包",
"desc": "干湿两用，静电除尘",
"price": "7.90",
"picture": "https://yanxuan-item.nosdn.127.net/cf7584e037706a8df54fecfc6dfdd2af.jpg",
"orderNum": null
},
{
"id": "1306019",
"name": "日式和风简约无盖垃圾桶11L",
"desc": "敞口设计易洗易干触手可得的洁净与精致",
"price": "9.90",
"picture": "https://yanxuan-item.nosdn.127.net/ca7144b1f5fda5528dd8e4c40abc3bcc.png",
"orderNum": null
},
{
"id": "1306017",
"name": "大容量干湿分类，脚踏缓降静音垃圾桶",
"desc": "一踩开合，解放双手",
"price": "89.00",
"picture": "https://yanxuan-item.nosdn.127.net/1b322ed8c25f94f1fbf39ddb5fedeb47.jpg",
"orderNum": null
},
{
"id": "1085007",
"name": "一抽即提，免脏手，加厚抽绳垃圾袋3卷60只",
"desc": "18μm及10μm两种厚度，袋身不怕漏，3秒抽绳不脏手",
"price": "9.50",
"picture": "https://yanxuan-item.nosdn.127.net/72af0b7c1d7b0b9710de621788326d2b.png",
"orderNum": null
},
{
"id": "1076004",
"name": "软糯治愈系擦手，雪尼尔擦手球",
"desc": "吸水快干，不易掉屑",
"price": "9.50",
"picture": "https://yanxuan-item.nosdn.127.net/43d99e9b97cc55033b0f59b95a91ae49.png",
"orderNum": null
}
]
}
]
}
15. Layout-吸顶导航交互实现
要求：浏览器在上下滚动的过程中，如果距离顶部的滚动距离大于78px，吸顶导航显示，小于78px隐藏
新增LayoutFixed.vue
<script setup>
import LayoutHeaderUl from './LayoutHeaderUl.vue'
// vueUse
import { useScroll } from '@vueuse/core'
const { y } = useScroll(window)
</script>
<template>
<div class="app-header-sticky" :class="{ show: y > 78 }">
<div class="container">
<RouterLink class="logo" to="/" />
<!-- 导航区域 -->
<LayoutHeaderUl />
<div class="right">
<RouterLink to="/">品牌</RouterLink>
<RouterLink to="/">专题</RouterLink>
</div>
</div>
</div>
</template>
<style scoped lang='scss'>
.app-header-sticky {
width: 100%;
height: 80px;
position: fixed;
left: 0;
top: 0;
z-index: 999;
background-color: #fff;
border-bottom: 1px solid #e4e4e4;
// 此处为关键样式!!!
// 状态一：往上平移自身高度 + 完全透明
transform: translateY(-100%);
opacity: 0;
// 状态二：移除平移 + 完全不透明
&.show {
transition: all 0.3s linear;
transform: none;
opacity: 1;
}
.container {
display: flex;
align-items: center;
}
.logo {
width: 200px;
height: 80px;
background: url("@/assets/images/logo.png") no-repeat right 2px;
background-size: 160px auto;
}
.right {
width: 220px;
display: flex;
text-align: center;
padding-left: 40px;
border-left: 2px solid $xtxColor;
a {
width: 38px;
margin-right: 40px;
font-size: 16px;
line-height: 1;
&:hover {
color: $xtxColor;
}
}
}
}
</style>
在index.vue中新增
<script setup>
import LayoutNav from './components/LayoutNav.vue'
import LayoutHeader from './components/LayoutHeader.vue'
import LayoutFooter from './components/LayoutFooter.vue'
import LayoutFixed from './components/LayoutFixed.vue'
// 触发获取导航列表的action
import { useCategoryStore } from '@/stores/categoryStore'
import { onMounted } from 'vue'
const categoryStore = useCategoryStore()
onMounted(() => categoryStore.getCategory())
</script>
<template>
<LayoutFixed />
<LayoutNav />
<LayoutHeader />
<!-- 添加key 破坏复用机制 强制销毁重建 -->
<!-- <RouterView :key="$route.fullPath" /> -->
<RouterView />
<LayoutFooter />
</template>
这里还用到了Vueuse
(base) ➜ vue3-rabbit git:(master) npm i @vueuse/core
added 6 packages, removed 1 package, and changed 4 packages in 2s
99 packages are looking for funding
16. Layout-Pinia优化重复请求
为什么要优化
如何优化
扫一扫
430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
