UniAPP搜索页面,存储关键词

<template> <view class="container"> <!-- 搜索条 --> <!-- <view class="searchTopBox"> <view class="searchBoxRadius"> <view class="grace-search-icon searchBoxIcon"></view> <input class="searchBoxIpt" type="search" v-model="ipt" @confirm="searchNow($event)" placeholder="关键字"></input> </view> </view> --> <view class="u1"> <image src="../../static/img/logo.png" mode="" style="width: 128upx; height: 51upx;"></image> <view class="sousuo"> <input type="text" value="" placeholder="请输入关键字搜索" focus="true" v-model="ipt" @confirm="searchNow($event)"/> <image src="../../static/img/sousuo.png" mode="" type="search" @tap="searchNow($event)"></image> </view> </view> <!-- 搜索历史 --> <view class="searchBotBox"> <view class="ov"> <view class="fl">历史搜索</view> <view @tap="clearKey" class="fr grace-more-r grace-search-remove"> <image src="../../static/img/sc.png" mode=""></image> </view> </view> <view class="searchHistoryBox"> <view class="searchHistoryBoxItem" v-for="(item,index) in searchKey" :key=‘index‘ @click="qusousuo(item)"> {{item}} </view> </view> </view> </view></template><script> export default { data() { return { searchKey: [], ipt:‘‘, searchClose: true, jiaodian:true } }, onLoad() { console.log(this.ipt.length) }, onShow() { try{ var vv = uni.getStorageSync(‘searchLocal‘) || ""; if(vv) { this.searchKey = JSON.parse(vv); } else { this.searchKey = []; } } catch(e){ console.log(e) } }, methods: { clearKey: function() { var that = this; uni.showModal({ title: ‘提示‘, content: ‘点击确定将删除所有历史信息,确定删除吗?‘, success: function(res) { // if (res.confirm) { that.searchKey = []; uni.setStorage({ key: ‘searchLocal‘, data: that.searchKey });// } else if (res.cancel) {// // } } }); }, searchNow(e) { console.log(e) this.jiaodian=false; if (this.ipt == ‘‘) { uni.showToast({ title: ‘未输入搜索关键字‘, icon: ‘none‘, duration: 1000 }); return false; } var that = this; var newArr = that.searchKey; console.log(newArr.length) if(this.searchKey.indexOf(this.ipt) == -1){ newArr.unshift(this.ipt); } if(newArr.length >= 11 ){ newArr.pop() } console.log(newArr.length) newArr = JSON.stringify(newArr);//转换成json格式的数据 uni.setStorage({ key: ‘searchLocal‘, data: newArr }); this.qusousuo(this.ipt); }, qusousuo(e){ console.log(e); this.ipt = ""; uni.navigateTo({ url:‘sousuo2?goods_name=‘+e }) } } }</script><style lang="scss"> .container{ padding-left:30upx; padding-right: 30upx; // background: pink; } .u1{ display: flex; justify-content: space-between; padding-top: 20upx; padding-bottom: 15upx; .sousuo{ display: flex; position: relative; input{ font-size: 24upx; line-height: 28upx; border-bottom:1px solid #f5f5f5; width: 515upx; } image{ width: 35upx; height: 35upx; position: absolute; right: 30upx; z-index: 3; } } } page { background: #FFF; } .ov { overflow: hidden; } .fl { float: left; font-family: PingFang-SC-Medium; font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 20px; letter-spacing: 0px; color: #666666; } .fr { float: right; } .fr image{ width:35upx; height: 37upx; } .searchTopBox { width: 100%; background-color: #0b877f; height: 100upx; box-sizing: border-box; padding-top: 15upx; } .searchBoxRadius { width: 90%; height: 70upx; background-color: #fff; margin-left: 5%; overflow: hidden; border-radius: 35upx; } .searchBoxIcon { font-size: 40upx; margin-top: 20upx; margin-left: 20upx; float: left; } .searchBoxIpt { height: 70upx; line-height: 70upx; margin-left: 20upx; float: left; } .searchBotBox { width: 100%; margin-top: 30upx; padding: 15upx 3%; box-sizing: border-box; } .searchHistoryBox { width: 100%; box-sizing: border-box; overflow: hidden; margin-top: 40upx; } .searchHistoryBoxItem { float: left; font-size: 26upx; color: #666; line-height: 49upx; height: 50upx; padding: 0 20upx; border-radius: 50upx; margin:15upx 30upx 15upx 0; border: 1px solid #ccc; text-align: center; }</style>

  主要是将搜索的关键词存储在uni.setStorage({key: ‘searchLocal‘,data: newArr});中,每次先查询一下将该次搜索的关键词与历史记录数组进行对比,indexof,查找不到将关键词存储到里面。

相关文章