优质高等职业院校建设网站网页设计作业 定做
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>