shop頁面上有一個搜索，可以進行商品搜索，這里我們先做一個頁面布局，后面再來進行數據i聯動。

1、shop頁面的搜索

2、搜索的頁面代碼

<navigator class="searchView" url="/pagesub/pageshop/search/search">
??????????????????????? <u-icon name="search" size="22" color="#FABE50"></u-icon>搜索
??????????????????????? <!-- 通過樣式壓在右上角 -->
?</navigator>

3、創建搜索頁面 search

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

3.2 search 代碼

<template><view class="searchLayout"><!-- 搜索頁面 --><u-search placeholder="請輸入搜索內容" v-model="keyword"  clearabledshowActionactionText="搜索" animation@search="onSearch"   @custom="onSearch"></u-search><!-- 雙向綁定  就是讓頁面和數據同步  這里是 v-model  或者 變量加冒號  --><!-- uview 中使用的 onsearch  是事件  @search:回車觸發  @custom:點擊搜索觸發--><!-- https://uviewui.com/components/search.html --><view class="historyList"><view class="item" v-for="(item,index) in historyList" :key="item"><view class="text">{{item}}</view><view class="close" @click="onClose(index)"><u-icon name="close" size="16" color="#999"></u-icon></view></view></view></view>
</template><script>export default {data() {return {keyword:"",historyList:[]};},onLoad(){let historyList = uni.getStorageSync("historyList") || []   //進入搜索頁面就需要   讀取緩存this.historyList = historyList    //把讀取到的結果 賦值給歷史搜索},methods:{//搜索事件onSearch(){				this.historyList.unshift(this.keyword)				this.historyList = [...new Set(this.historyList)];  //去重，去點重復的值  這個方法是數組去重uni.setStorageSync("historyList",this.historyList)   //把搜索過的對象  存儲在緩存中},//刪除歷史onClose(index){console.log(index);this.historyList.splice(index,1);   //刪除 提供的index 對應的搜索對象uni.setStorageSync("historyList",this.historyList)   //把刪除過 的對象，存儲在緩存中}}}
</script><style lang="scss">
.searchLayout{padding:30rpx;.historyList{margin-top:30rpx;.item{@include flex-box();font-size: 32rpx;padding:30rpx 0;color:#333;border-bottom: 1px solid $border-color-light;}}
}</style>

4、搜索代碼解析 search.vue

包含兩部分? 一個是search 一個是 搜索歷史的處理

4.1 搜索頁面樣式

4.2 u-serach的使用

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

        <!-- 搜索頁面 --><u-search placeholder="請輸入搜索內容" v-model="keyword"  clearabledshowActionactionText="搜索" animation@search="onSearch"   @custom="onSearch"></u-search><!-- 雙向綁定  就是讓頁面和數據同步  這里是 v-model  或者 變量加冒號  --><!-- uview 中使用的 onsearch  是事件  @search:回車觸發  @custom:點擊搜索觸發--><!-- https://uviewui.com/components/search.html -->

相應字段 意思 在上面的官網上有介紹。

4.3 歷史搜索記錄處理

        <view class="historyList"><view class="item" v-for="(item,index) in historyList" :key="item"><view class="text">{{item}}</view><view class="close" @click="onClose(index)"><u-icon name="close" size="16" color="#999"></u-icon></view></view></view>

將搜索記錄存儲到 historyList 列表中

將記錄展示在下方，并提供刪除歷史的操作鍵 close

這里主要使用到了 存儲歷史記錄到緩存中。

用到了 數組列表 的添加? unshift?? 刪除的splice （也可以用filter）

這里將會用到其他方法：

<script>export default {data() {return {keyword:"",historyList:[]};},onLoad(){let historyList = uni.getStorageSync("historyList") || []   //進入搜索頁面就需要   讀取緩存this.historyList = historyList    //把讀取到的結果 賦值給歷史搜索},methods:{//搜索事件onSearch(){				this.historyList.unshift(this.keyword)				this.historyList = [...new Set(this.historyList)];  //去重，去點重復的值  這個方法是數組去重uni.setStorageSync("historyList",this.historyList)   //把搜索過的對象  存儲在緩存中},//刪除歷史onClose(index){console.log(index);this.historyList.splice(index,1);   //刪除 提供的index 對應的搜索對象uni.setStorageSync("historyList",this.historyList)   //把刪除過 的對象，存儲在緩存中}}}
</script>