前言

此篇文章纯代码较多，细节解释，今后会出更加详细的解释

效果展示

保存的内容，可以长按删除，视频时长原因就不一一展示，具体效果如下视频

主体内容

这里one-adv是封装的组件，提高代码的复用，更好的减少代码长度，根据自己的后台数据库内容进行内容的渲染，这里面的props都是后台数据传递，从而实现利用此组件，如下代码段及是封装代码

<template><view class="oneadv"><view v-if="title" class="pl-1">{{title}}</view><image v-if="cover" :src="cover" :class="isshowstyle?'getImage':''" @click="removeAll"></image><slot></slot></view>
</template><script>export default {data() {return {}},props: {title: {type: String},cover: {type: String},isshowstyle: {type: Boolean}},methods: {removeAll(){this.$emit('removeall')}}}
</script><style scoped>.oneadv {position: relative;}.title {font-size: 28rpx;padding: 0 0 8rpx 20rpx;}image {width: 750rpx;height: 350rpx;}.getImage {width:40rpx;height:44rpx;position: absolute;top:0rpx;right:40rpx;}
</style>

此结代码，是简单的将自己写入的死数据，渲染上去，和一些基础的样式，来调试页面的体现感受，更好的用户体验

<template><view><u-search placeholder="请输入搜索内容" v-model="keyword" :animation="true" @custom="custom" @change="changeinput" @blur="blurinput"></u-search><one-adv title="热门搜索" cover="../../pagesA/static/images/demo/demo4.jpg"><color-tag v-for="(item,index) in hot" :key="index" :item="item" :color="true" @click.native="sumbitkey(item)"></color-tag></one-adv><divider></divider><one-adv title="常用分类"><color-tag v-for="(item,index) in cate" :key="index" :item="item" :color="false" @click.native="sumbitkey(item)"></color-tag></one-adv><divider></divider><one-adv title="历史记录" cover="../../pagesA/static/images/demo/del.png" :isshowstyle="true" @removeall="removeAll"><color-tag v-for="(item,index) in searchList" :key="index" :item="{name:item}" :color="false" @longpress="longpress(index)" class="position-relative" @click.native="sumbitkey(item)"><icon type="clear" size="16" class="position-absolute icon" v-if="isshow&&currentIndex==index" @tap="removeItem(index)"/></color-tag></one-adv></view>
</template><script>export default {data() {return {keyword: '',currentIndex:0,isshow:false,//删除图标searchList: [], //存储的搜索的内容hot: [{name: '领券中心'},{name: 'Redmi K20'},{name: 'RedmiBook 14'},{name: '智能积木 越野四驱车'},{name: '手环 腕带'},],cate: [{name: '耳机'},{name: '手机'},{name: '音箱'},{name: '手表'},{name: '配件'},{name: '网关/传感器'},{name: '健康'},{name: '酷玩'},]}},

一共有八种需求，来实现较为完整的搜索页面，分别是：

1.清楚搜索框，利用element组件中的api来实现，搜索框内容的删除，可以简介快速的进行下一次的搜索

2.点击搜索，简单利用uniapp组件来提示，没有写输入时提示弹窗，后面功能就是将搜索内容保存到浏览器中，然后跳转到相应的页面

3.搜索内容改变，简单来说就是控制输入内容的格式，格式判断是利用正则表达式，不对的话就利用uniapp的提示框来弹窗提示。

4.失焦，配合搜索框，提高使用搜索框的使用体验

5.删除所有，删除搜索后保存的内容，因为保存在浏览其中，所以删除也要删除浏览其中的数据，不能只删除表面内容，要将数据删除，才会保证不会出现bug，已知如果不讲数据删除，刷新过后会重新渲染，等于就是没有删除，所以一定要删除保存的数据

6、7.是配合一块使用，选出单个的元素然后再将单独选择出来的选项删除，做到单独删除，想删除那个就删除那个搜索记录，会更加的人性化

8.点击搜索记录，将直接渲染到搜索框，从而搜索历史记录的内容，为想要再次搜索以前内容的客户，提高使用体验

mounted() {let his = uni.getStorageSync('history_key')this.searchList = his||[]console.log(this.searchList);},methods: {//点击清空搜索框clear() {this.keyword = ''},//点击搜索custom(value) {if (this.keyword == '') {uni.showToast({title: '搜索内容不能为空',icon: 'none'})return;} else {let index = this.searchList.indexOf(this.keyword)if (index === -1) {this.searchList.unshift(this.keyword)uni.setStorageSync('history_key', this.searchList);} else {this.searchList.unshift(this.searchList.splice(index, 1)[0])uni.setStorageSync('history_key', this.searchList);}uni.navigateTo({url:`../choose/choose?key=${this.keyword}`})}},//搜索内容改变changeinput() {var partten = /^(?!(\s+$))/; //正则表达式规则let val = this.keywordif (!partten.test(val)) {uni.showToast({title: '请不要输入空白字符',icon: 'none'})return;}},//失焦blurinput() {this.keyword = this.keyword.trim()},//删除所有removeAll() {uni.showModal({title: '提示',content: '您确定要删除所有历史记录吗',success: (res)=> {if (res.confirm) {uni.removeStorageSync('history_key');this.searchList = []} else if (res.cancel) {return;}}})},//长按longpress(index){console.log(index);this.isshow = truethis.currentIndex = index},//移除单个搜索记录removeItem(i){this.searchList.splice(i,1)uni.setStorageSync('history_key', this.searchList);},//点击按钮进入搜索sumbitkey(item){console.log(item);if(item.name){this.keyword = item.name}else {this.keyword = item}}}}
</script><style scoped lang="scss">/* sass中的样式穿透 *//deep/ .u-search {margin: 0 0 20rpx 0 !important;}.icon {right:0;}
</style>

结束语：

本次内容分享到此结束啦，更加详细的功能解释，会在后面的文章展现出来，为了减少篇幅长度，分开介绍

【uni-app微信小程序】搜索页面开发，可以保存用户搜索历史，删除历史（简单解释）相关推荐

基于java的微信小程序的实现（十）用户搜索及热搜词相关功能后端实现
文章目录 1.添加热搜词功能 1.数据库表结构分析 2.需求分析 3.代码实现 2.查询热搜词功能 1.需求分析 2.代码实现 3.搜索功能的实现 1.需求分析 2.自定义模糊查询 1.添加热搜词功能 ...
微信小程序应用号开发教程！博卡君通宵吐血赶稿
微信应用号(微信公众平台小程序,「应用号」的新称呼)终于来了!开源中国社区的博卡君通宵吐血赶稿写出的微信公众平台应用号开发教程!大家赶紧来学习一下吧对了,昨天晚间微信小程序开发文档官方版发布了微信 ...
eslint不报错 vue_2-2【微信小程序全栈开发课程】index页面搭建--ESlint格式错误
1.修改入口文件也就是src/pages/index/main.js文件 main.js是入口文件,通过main.js来加载index.vue文件.每个页面文件夹中都要有main.js文件 //加载 ...
uniapp开发微信小程序-4.页面跳转与横向滑动
uniapp开发微信小程序-4.页面跳转与横向滑动本篇文章主要是想记录一下横向滑动功能,备忘的同时给大家做个分享. 但既然是初级分享系列文章,为了方便新手朋友的上手工作,还是在此之前说一下页面跳转的 ...
4.1【微信小程序全栈开发课程】个人中心（一）--页面样式、用户信息展示
第四章,我们来完善个人中心,主要操作是src/pages/me文件夹中的me.vue文件,先看看个人中心页面的效果: 1.将个人中心页面放在首页在讲解app.json文件时,提到过在pages数组中 ...
微信小程序开发系列 (四) ：微信小程序的页面跳转路由设计
笔者由于工作需要,曾经参加过一个微信小程序同 SAP 系统集成的项目,因此从零开始学习了微信小程序的开发知识.这里通过系列文章把自己所学分享出来,希望对相关学习者有所帮助. 本教程前面三篇文章: 微信 ...
微信小程序之页面内搜索查询功能
文章目录一.效果演示二.如何操作三.项目demo地址四.参考链接一.效果演示二.如何操作具体操作可以参考博客原生微信小程序,搜索框(search)组件和微信小程序页面内搜索查询(无后台) ...
上拉加载更多后台数据_6-7【微信小程序全栈开发课程】记录页面（七）--分页加载记录数据...
现在是一次性加载所有的记录数据,数据多的时候,会加载比较慢,所以我们改成分页加载,一次最多加载15条数据每次拉倒底部都会自动加载下一页的数据,知道所有的数据加载完成 1.添加data变量编辑rec ...
微信小程序蓝牙BLE开发实战——案例(二)
微信小程序蓝牙BLE开发实战(二) 上篇主要介绍在开发过程中应用到相关API操作.接下来介绍个人在项目开发中应用蓝牙BLE一些事情. 由于时间比较仓促, 有些注释没那么详细.请理解~写的不好欢迎各位大 ...
php小程序开发实例,微信小程序全局配置开发实例
本文主要和大家分享微信小程序全局配置开发实例,主要以代码的形式和大家分享,希望能帮助到大家. 一.app.json 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设 ...

【uni-app微信小程序】搜索页面开发，可以保存用户搜索历史，删除历史（简单解释）

前言

效果展示

主体内容

【uni-app微信小程序】搜索页面开发，可以保存用户搜索历史，删除历史（简单解释）相关推荐

最新文章

热门文章