<模板>
<查看类='内容'>
<视图类='搜索框'>
<视图类='输入框'>
<input type='text' adjustment-position='true' v-model='keyword' :placeholder='defaultKeyword'
placeholder-class='search_text' @confirm='doSearch' data-key='false' 确认类型='search'
@input='onclear'></input>
<image src='/static/close.png' @tap='clears' v-if='shows == true'></image>
</查看>
<view class='search-btn' @tap='doSearch' data-key='false' :style=''background:' + color'>搜索</view>
</查看>
<视图类='搜索关键字'>
<scroll-view class='keyword-box'scroll-y>
<view class='keyword-block' v-if='oldKeywordList.length>0'>
<视图类='关键字列表标题'>
<查看>历史搜索</查看>
<视图>
<image @tap='oldDelete' src='/static/delete.png'></image>
</查看>
</查看>
<视图类='关键字'>
<view v-for='(item, index) in oldKeywordList' :key='index' @tap='doHisSearch(item)'>{{item}}
</查看>
</查看>
</查看>
</滚动视图>
</查看>
</查看>
</模板>
<脚本>
// 不同的业务功能历史记录设置不同的存储key
const kStorageKey = '存储密钥'
从“vue”导入 Vue
Vue.mixin({
方法： {
setData: 函数(obj, 回调) {
让那个=这个；
const handleData = (tepData, tepKey, afterKey) => {
tepKey = tepKey.split('.');
tepKey.forEach(项目 => {
if (tepData[item] === null || tepData[item] === undefined) {
让reg = /^[0-9]+$/;
tepData[item] = reg.test(afterKey) ? []：{}；
tepData = tepData[项目];
} 别的 {
tepData = tepData[项目];
}
});
返回tepData；
};
const isFn = 函数(值) {
返回 typeof 值 == '函数' || 错误的;
};
Object.keys(obj).forEach(函数(key) {
让 val = obj[键];
key = key.replace(/\]/g, '').replace(/\[/g, '.');
让前、后；
让index_after = key.lastIndexOf('.');
if (index_after != -1) {
之后 = key.slice(index_after + 1);
front = handleData(that, key.slice(0, index_after), after);
} 别的 {
之后=键；
前面=那个；
}
if (front.$data && front.$data[after] === undefined) {
Object.defineProperty(前，后，{
得到（） {
返回前面。$data[之后];
},
设置（新值）{
前面。$data[之后] = newValue;
that.$forceUpdate();
},
可枚举：真实，
可配置：真
});
前[后] = val;
} 别的 {
that.$set(前、后、val);
}
});
isFn(回调) && this.$nextTick(回调);
}
}
});
var app = getApp();
导出默认值{
数据（） {
返回 {
默认关键字：'',
关键字：'',
旧关键字列表：[]，
热门关键字列表：[],
关键字列表：[],
禁止： ''，
显示：假，
颜色： ''
};
},
成分： {}，
道具： {}，
/**
* 生命周期函数--监听页面加载
*/
onLoad：函数（选项）{
this.setData({
颜色：app.globalData.newColor
});
this.init();
},
方法： {
在里面（） {
this.loadDefaultKeyword();
this.loadOldKeyword();
},
加载默认关键字() {
//定义默认搜索关键字，可以自己实现ajax请求数据赋值，用户未输入时，以水印方式在输入框中显示，直接不输入内容搜索会默认搜索关键字
this.setData({
defaultKeyword: '请输入搜索的内容'
});
},
//加载历史搜索,自动读取本地存储
加载旧关键字() {
uni.getStorage({
键：kStorageKey，
success: res => {
var OldKeys = JSON.parse(res.data);
this.setData({
oldKeywordList: OldKeys
});
}
});
},
// 执行搜索事件
doSearch() {
if (this.keyword == '') {
uni.showToast({
title: '请输入要搜索的内容',
icon: 'none'
});
return;
}
//
if (this.keyword && this.keyword !== '') {
this.saveKeyword(this.keyword); //保存为历史
}
uni.showLoading({
title: '搜索中...'
});
this.setData({
keywordList: []
});
uni.hideLoading()
uni.showModal({
title: '温馨提示',
content: '搜索的内容 = ' + this.keyword
})
// uni.showToast({
// title: '暂无结果',
// icon: 'none'
// })
},
onclear(e) {
this.setData({
keyword: e.detail.value,
shows: e.detail.value !== '' ? true : false
});
},
//保存关键字到历史记录
saveKeyword(keyword) {
uni.getStorage({
key: kStorageKey,
success: res => {
var OldKeys = JSON.parse(res.data);
var findIndex = OldKeys.indexOf(keyword);
if (findIndex == -1) {
OldKeys.unshift(keyword);
} else {
OldKeys.splice(findIndex, 1);
OldKeys.unshift(keyword);
} //最多10个纪录
OldKeys.length > 10 && OldKeys.pop();
uni.setStorage({
键：kStorageKey，
数据：JSON.stringify(OldKeys)
});
this.setData({
oldKeywordList: OldKeys //更新历史搜索
});
},
失败：e => {
var OldKeys = [关键字];
uni.setStorage({
键：kStorageKey，
数据：JSON.stringify(OldKeys)
});
this.setData({
oldKeywordList: OldKeys //更新历史搜索
});
}
});
},
旧删除() {
uni.showModal({
content: '确定清除历史搜索记录？',
成功：资源=> {
if (res.confirm) {
console.log('用户点击确定');
this.setData({
旧关键字列表：[]
});
uni.removeStorage({
密钥：kStorageKey
});
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
清除（）{
this.setData({
关键字：'',
关键字列表：[],
});
},
//点击历史记录搜索
doHisSearch（项目）{
控制台.log(项目)
uni.showModal({
title: '点击的历史搜索边界',
content: '点击的历史搜索边界 = ' + item
})
},
}
};
</脚本>
<样式范围 lang='scss'>
看法 {
显示：块；
}
。搜索框 {
背景颜色: rgb(242, 242, 242);
填充量：15upx 2.5%；
显示：柔性；
justify-content：空间之间；
位置：粘性；
顶部：0；
}
.search-box .mSearch-input-box {
宽度：100%；
}
.search-box .input-box {
width: 85%;
flex-shrink: 1;
display: flex;
justify-content: center;
align-items: center;
}
.search-box .search-btn {
width: 15%;
margin: 0 0 0 2%;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
font-size: 24upx;
color: #fff;
background: linear-gradient(to right, #4492EB, #3F92EE);
border-radius: 60upx;
}
.search-box .input-box>input {
width: 95%;
height: 60upx;
font-size: 24upx;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
background-color: #ffffff;
}
.placeholder-class {
color: #9e9e9e;
}
.search-keyword {
width: 100%;
background-color: rgb(242, 242, 242);
}
.keyword-list-box {
height: calc(100vh - 110upx);
padding-top: 10upx;
border-radius: 20upx 20upx 0 0;
background-color: #fff;
}
.keyword-entry-tap {
background-color: #eee;
}
.keyword-entry {
width: 94%;
height: 80upx;
margin: 0 3%;
font-size: 30upx;
color: #333;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: solid 1upx #e7e7e7;
}
.keyword-entry image {
width: 60upx;
height: 60upx;
}
.keyword-entry .keyword-text,
.keyword-entry .keyword-img {
height: 80upx;
display: flex;
align-items: center;
}
.keyword-entry .keyword-text {
width: 90%;
}
.keyword-entry .keyword-img {
width: 10%;
justify-content: center;
}
.keyword-box {
height: calc(100vh - 110upx);
border-radius: 20upx 20upx 0 0;
background-color: #fff;
}
.keyword-box .keyword-block {
padding: 10upx 0;
}
.keyword-box .keyword-block .keyword-list-header {
width: 94%;
padding: 10upx 3%;
font-size: 27upx;
color: #333;
display: flex;
justify-content: space-between;
}
.keyword-box .keyword-block .keyword-list-header image {
width: 40upx;
height: 40upx;
}
.keyword-box .keyword-block .keyword {
width: 94%;
padding: 3px 3%;
display: flex;
flex-flow: wrap;
justify-content: flex-start;
}
.keyword-box .keyword-block .hide-hot-tis {
display: flex;
justify-content: center;
font-size: 28upx;
color: #6b6b6b;
}
.keyword-box .keyword-block .keyword>view {
display: flex;
justify-content: center;
align-items: center;
border-radius: 38upx;
padding: 0 20upx;
边距：10upx 20upx 10upx 0；
高度：60upx；
字体大小：24upx；
背景颜色: rgb(242, 242, 242);
颜色：#6b6b6b；
行高：60upx；
}
.search_text {
字体大小：24upx；
颜色：#B6B6C6；
}
.输入框{
位置：相对；
高度：60upx；
字体大小：24upx；
边框：0；
边框半径：60upx；
-webkit-外观：无；
外观：无；
填充：0 3%；
保证金：0；
背景颜色：#ffffff；
}
.输入框图像{
高度：40upx；
宽度：40upx；
浮动：右；
位置：绝对；
右：2%；
顶部：50%；
变换：翻译Y(-50%)；
z 索引：100；
}
</风格>
