相信大家都见过百度的搜索框,我们在搜索框输入文字之后,然后点击百度一下,我们就可以开始搜索我们的网页了.
而在微信小程序中,APP中,我们会出现一个场景:
搜入几个字之后,我希望它能联想,或者显示出我们想要的数据.而不需要点搜索按钮.
微信小程序中有一个bindInput属性可以绑定每次输入. 但我们可能有个需求,不是刚写一个字就搜索.而是几个字输完之后,再调用后台的搜索.
将如下函数,放入小程序的js页面之中
function debounce(func, wait=1000){ //可以放入项目中的公共方法中进行调用(鹅只是省事)
let timeout;
return function(event){
clearTimeout(timeout)
timeout = setTimeout(()=>{
func.call(this, event)
},wait)
}
}
在page里的方法加入
inputJe: debounce(function (e) {
console.log(e.detail.value);
}),
wxml输入框绑定inputJe方法即可.
VUE的示例如下
<template>
<div>
<input type='text' v-model='value' @keydown = "hangleChange">
</div>
</template>
<script>
function debounce(func, wait=1000){ //可以放入项目中的公共方法中进行调用(鹅只是省事)
let timeout;
return function(event){
clearTimeout(timeout)
timeout = setTimeout(()=>{
func.call(this, event)
},wait)
}
}
export default{
name:'',
data(){
return{
value:''
}
},
methods:{
hangleChange:debounce(function(e){
console.log(this.value)
})
}
}
</script>