场景描述:
在一个列表界面中,顶部是input搜索框。(一般情况是点击搜索框会跳转搜索界面进行相关逻辑的处理。但是,我们这个不跳转新界面,是在当前界面进行搜素。)
wxml 代码如下:
<input type="text" placeholder="搜索相关内容" bindinput="searchContent" value="{{searchVal}}">
js 代码如下:
let timer = 0;//这里是定义一个全局的变量。 Page({ data:{ searchVal:'', }, //input的搜索事件 searchContent:function(e){ let keyWord = e.detail.value ? e.detail.value : null ; let that = this; if(timer){ clearTimeout(timer) } timer = setTimeout(()=>{ if(keyWord==null){ //这里表示 如果搜索框中没有数据的话,做的一些处理 }else{ //这里是搜索框中有值的情况,可以直接请求搜索接口即可 } },1000)
that.setData({
searchVal:keyWord,
timer:null
}) },
//请求搜索接口
requestSearchApi:function(data){
//例如:方法照例简单封装了一下
Utils.get('api/xxx',data).then(res=>{}).catch(err=>{})
} })