【小程序项目开发-- 京东商城】uni-app之分类导航区域

最新推荐文章于 2024-05-07 17:05:52 发布

bsegebr

最新推荐文章于 2024-05-07 17:05:52 发布

阅读量561

点赞数

分类专栏：面试阿里巴巴文章标签： android 前端后端

本文链接：https://blog.csdn.net/bsegebr/article/details/126044653

版权

本文主要介绍了在uni-app中开发京东商城小程序的分类导航区域，包括封装uni.$showMsg()方法、响应数据参考、获取分类导航数据的实现、分类导航UI结构的设计以及点击分类选项跳转到相应页面的处理。在UI渲染中注意动态绑定数据和设置根节点，监听点击事件以实现分类跳转。

摘要由CSDN通过智能技术生成

在这里插入图片描述

???欢迎来到???
??魔术之家！！??

该文章收录专栏
?-- 2022微信小程序京东商城实战 --?

专栏内容
?-- 京东商城uni-app项目搭建 --?
?-- 京东商城uni-app 配置tabBar & 窗口样式 --?
?-- 京东商城uni-app开发之分包配置 --?
?-- 京东商城uni-app开发之轮播图 --?
?-- 京东商城uni-app之分类导航区域 --?
?-- 京东商城uni-app 首页楼层商品 --?
?-- 京东商城uni-app 商品分类页面（上） --?
?-- 京东商城uni-app 商品分类页面（下） --?
?-- 京东商城uni-app之自定义搜索组件（上） --?
?-- 京东商城uni-app之自定义搜索组件（中） --?

实现目标：
在这里插入图片描述

一、封装uni.$showMsg()

开发场景

在项目中，我们经常需要多次调取数据，而当数据请求失败之后，经常需要调用 uni.showToast({ /* 配置对象 */ }) 方法来提示用户。此时，可以在全局封装一个 uni.$showMsg() 方法，来简化 uni.showToast() 方法的调用。

具体的改造步骤如下：
在main.js 项目入口文件中，为uni挂载一个$showMsg() 方法，$表示自定义挂载函数

在函数上是赋值参数用=，在showToast函数内传的是一个字典，里面赋值是:

// 挂载 uni请求数据消息提示 方法 (默认)
uni.$showMsg = function(title = '数据加载错误...', duration = 1500,icon = 'fail' ) {
  uni.showToast({
    title,
    duration,
    icon
  })
}

将封装好的代码用于hom