效果如图:
<view class="search">
<input type="text" placeholder="搜索您需要的内容" :value="keyword" @input="input" @confirm="search"/>
<image src="../../static/sousuo.png" class="icon-search"></image>
</view>
<h2>搜索历史</h2>
<view class="souList" v-if="word_list.length>0">
<text class="sou" v-for="i in word_list" @click="tapTab(i)" :class="tabIndex == i ?'on':''">
{{i}}
</text>
</view>
<script>
export default {
data() {
return {
keyword:'',
word_list:[],
}
},
onLoad(e) {
this.openHistorySearch()
},
methods: {
openHistorySearch() {
this.word_list = uni.getStorageSync('word_list')||[];
},
search(res) {
if(this.keyword==""){
return false;
}else{
if(this.word_list.length<8){
var newArr = this.word_list.findIndex(item => {
return item === this.keyword;
})
if(newArr != -1){
this.word_list.splice(newArr,1)
this.word_list.unshift(this.keyword)
}else{
this.word_list.unshift(this.keyword)
}
}else{
this.word_list.pop()
this.word_list.unshift(this.keyword)
}
uni.setStorageSync('word_list',this.word_list)
}
},
}
}
</script>