目录
前言
此篇文章纯代码较多，细节解释，今后会出更加详细的解释
效果展示
保存的内容，可以长按删除，视频时长原因就不一一展示，具体效果如下视频
主体内容
这里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&¤tIndex==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: '酷玩'
},
]
}
},一共有八种需求，来实现较为完整的搜索页面，分别是：
扫描二维码关注公众号，回复：
14536131 查看本文章
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.keyword
if (!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 = true
this.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>结束语：
本次内容分享到此结束啦，更加详细的功能解释，会在后面的文章展现出来，为了减少篇幅长度，分开介绍
