『uni-app』搜索框防抖、自动获取焦点

1.搜索框基本UI结构

.search-box {//实现吸顶效果position: sticky;top: 0;//防止被后面的图片覆盖z-index: 999;
}

//input事件处理函数
methods: {input(e) {// e.value 是最新的搜索内容console.log(e.value)}
}

uni-search-bar官方教学：uni-app官网 

2.自动获取焦点

目的：实现跳转到本页面后光标立即定位到搜索框中

修改 components -> uni-search-bar -> uni-search-bar.vue 组件，把 data 数据中的 show 和 showSync 的值，从默认的 false 改为 true 即可：

3.防抖处理

问题：因为搜索框input函数只要输入便会记录输入值，但是很多情况下输入过程中的值并不是我们想要的，所以不需要读取

方案：设置延时器，规定时间内连续输入则input函数不会读取

在 data 中定义防抖的延时器 timerId 如下：

data() {return {// 延时器的 timerIdtimer: null,// 搜索关键词kw: ''}
}

修改 input 事件处理函数如下：

input(e) {// 清除 timer 对应的延时器clearTimeout(this.timer)// 重新启动一个延时器，并把 timerId 赋值给 this.timerthis.timer = setTimeout(() => {// 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值this.kw = e.valueconsole.log(this.kw)}, 500)
}

注意：我们页面中使用了定时器，在离开这个页面的时候一定要记得清除，避免出现bug。

扩展：settimeout和setinterval之间有什么区别？

区别：setTimeout只运行一次，也就是说设定的时间到后就触发运行指定代码，运行完后即结束；而etinterval是一直循环运行下去，即每到设定时间间隔就触发指定代码，要想停止，需要使用clearInterval()函数。

定时器官方介绍：setTimeout(callback, delay, rest) | uni-app官网

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！