uniapp商城之商品分类
发布时间
阅读量：
阅读量
文章目录
-
前言
-
一、新建分类组件
-
- 1.轮播图效果
-
二、一级分类与Tab交互
-
- 1.封装API接口
- 2.初始化调用
- 3.定义类型
- 4.渲染一级分类
- 5.Tab交互
-
三、二级分类与商品渲染
-
- 1.提取当前二级分类数据
- 2.渲染二级分类
- 2.渲染商品
-
四、骨架屏
-
- 1.微信开发者工具
- 2.生成骨架屏
- 3.调整为vue组件
-
方便开发的操作
前言
效果图如下：
一、新建分类组件
在pages里新建文件夹category——> category.vue，在pages.json配置路由，如下
1.轮播图效果
轮播图组件 ：因轮播图用于多处(首页和分类页),需要封装成通用组件，故放于公共页面components——> XtxSwiper.vue
自动导入全局组件 ：将公用的Xtx开头组件配置自动导入，在pages.json
全局组件类型声明
接口请求封装
类型声明
调用接口获取轮播数据
在父组件categoru.vue调用接口
子组件XtxSwiper.vue接收
二、一级分类与Tab交互
1.封装API接口
2.初始化调用
此时可以打印出数据
3.定义类型
由于类型为unknown，修改为如下
保存数据，鼠标滑过res,出现类型
4.渲染一级分类
5.Tab交互
当用户点击一级分类时，高亮显示
三、二级分类与商品渲染
点击左侧一级，右侧二级应出现对应的数据，与左侧的下标有关
1.提取当前二级分类数据
categoryList已存一级数据，在一级数据的基础上，根据下标筛选出二级数据
注意?.的用法，为避免为空报错，若传的不是数组，让它为空数组
2.渲染二级分类
2.渲染商品
四、骨架屏
数据过多情况下，为缓解用户等待焦虑。数据加载完成直接渲染页面，若没有加载完成就显示骨架屏
1.微信开发者工具
点击页面信息，有生成骨架屏选项
2.生成骨架屏
3.调整为vue组件
将开发者工具生成的wxml文件复制到新建文件
爆红是因为ts校验，在红的前面加：
方便开发的操作
在分类模块中，每次运行打开的都是首页，如何直接看到分类tab页面，修改如下配置即可
全部评论 (0)
还没有任何评论哟~