uni-app 小项目开发 仿小米商城 前端开发1

实现

	1.主页面的顶部导航栏和底部导航栏。
	2.顶部导航栏功能的实现及相关页面的搭建。

实现方法

	主要采用uni-app组件进行搭建。uni-app链接：https://uniapp.dcloud.io/
	使用的组件：
	    uni-group	uni-icons	uni-nav-bar	uni-popup	
	    uni-search-bar	uni-tag 

1. 底部导航栏的实现
   在项目的page.json文件中添加 tabBar 在这个对象中添加 list 数组，其中的每一个对象都有 text（导航栏分栏名），pagePath（页面路径），iconPath（导航栏分栏静态图标路径），selectedIconPath（导航栏分栏选择是的图标路径），最多5个分栏。本项目中有主页，分类，购物车，我的 4 个分区。
2. 顶部导航栏的实现
   采用 uni-app 中的组件 uni-search-bar 采用插槽的方式，左侧显示商标，右侧为图标链接跳转到我的页面。中间 input 搜索框跳转到 search 页面。
   页面跳转的方法：
   （1）页面跳转：uni.navigateTo。
   （2）底部分栏跳转：uni.switchTab。
3. 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