当前位置：首页 > news >正文

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

news 来源：原创 2025/4/23 5:51:11

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

1、shop页面的搜索

2、搜索的页面代码

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>