实现
1.主页面的顶部导航栏和底部导航栏。
2.顶部导航栏功能的实现及相关页面的搭建。
实现方法
主要采用uni-app组件进行搭建。uni-app链接:https://uniapp.dcloud.io/
使用的组件:
uni-group uni-icons uni-nav-bar uni-popup
uni-search-bar uni-tag
- 底部导航栏的实现
在项目的page.json文件中添加 tabBar 在这个对象中添加 list 数组,其中的每一个对象都有 text(导航栏分栏名),pagePath(页面路径),iconPath(导航栏分栏静态图标路径),selectedIconPath(导航栏分栏选择是的图标路径),最多5个分栏。本项目中有主页,分类,购物车,我的 4 个分区。 - 顶部导航栏的实现
采用 uni-app 中的组件 uni-search-bar 采用插槽的方式,左侧显示商标,右侧为图标链接跳转到我的页面。中间 input 搜索框跳转到 search 页面。
页面跳转的方法:
(1)页面跳转:uni.navigateTo。
(2)底部分栏跳转:uni.switchTab。 - search 页的实现
顶部导航栏采用 uni-app 中的组件 uni-search-bar 。
左侧图标可以返回主页。
右侧搜索图标和中间的搜索框可进行输入内容的获取。(目前没有连接数据库,没有实现搜索功能)。
搜索历史当搜索框内容不为空,点击回车和点击搜索图标时展示搜索过的内容,数据为空时不显示。
搜索历史可进行全部删除,采用***uni-app*** 中的组件 uni-tag。点击删除图标时,出现提示框点击确定则删除。
搜索发现采用的是 uni-app 中的组件 uni-group 。其中的内容也可以进行搜索。
遇到的问题
1. uni-app 默认样式的修改
找到 uni-app 组件的类名,在自己重写的样式前加 /deep/
例:
.uni-tag{
width:80rpx;
}
改为
/deep/ .uni-tag{
width:80rpx;
}
源码
Github:https://github.com/hrbust1914010305/uni-app-shop