uniapp-商城-33-shop 布局搜索页面以及u-search

shop页面上有一个搜索，可以进行商品搜索，这里我们先做一个页面布局，后面再来进行数据i联动。

1、shop页面的搜索

2、搜索的页面代码

                        搜索
                       
 

3、创建搜索页面 search

3.1 创建 pagesub---pageshop---search--search.vue

3.2 search 代码

4、搜索代码解析 search.vue

包含两部分  一个是search 一个是 搜索历史的处理

4.1 搜索页面样式

4.2 u-serach的使用

Search 搜索 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架

相应字段 意思 在上面的官网上有介绍。

4.3 历史搜索记录处理

        
			
				{{item}}
				
					
				
			
		

将搜索记录存储到 historyList 列表中

将记录展示在下方，并提供删除历史的操作键 close

这里主要使用到了 存储历史记录到缓存中。

用到了 数组列表 的添加  unshift   删除的splice （也可以用filter）

这里将会用到其他方法：