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"
clearabled
showAction
actionText="搜索"
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"
clearabled
showAction
actionText="搜索"
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>
