![cover](https://img-blog.csdnimg.cn/img_convert/a7b426f027554ddcbce196b962043da2.png)
『uni-app』搜索框防抖、自动获取焦点
问题:因为搜索框input函数只要输入便会记录输入值,但是很多情况下输入过程中的值并不是我们想要的,所以不需要读取。方案:设置延时器,规定时间内连续输入则input函数不会读取。目的:实现跳转到本页面后光标立即定位到搜索框中。组件,把 data 数据中的。
·
1.搜索框基本UI结构
<view class="search-box">
<!-- 使用 uni-ui 提供的搜索组件 -->
<uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar>
</view>
.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 {
// 延时器的 timerId
timer: null,
// 搜索关键词
kw: ''
}
}
修改 input
事件处理函数如下:
input(e) {
// 清除 timer 对应的延时器
clearTimeout(this.timer)
// 重新启动一个延时器,并把 timerId 赋值给 this.timer
this.timer = setTimeout(() => {
// 如果 500 毫秒内,没有触发新的输入事件,则为搜索关键词赋值
this.kw = e.value
console.log(this.kw)
}, 500)
}
注意:我们页面中使用了定时器,在离开这个页面的时候一定要记得清除,避免出现bug。
扩展:settimeout和setinterval之间有什么区别?
区别:setTimeout只运行一次,也就是说设定的时间到后就触发运行指定代码,运行完后即结束;而etinterval是一直循环运行下去,即每到设定时间间隔就触发指定代码,要想停止,需要使用clearInterval()函数。
更多推荐
所有评论(0)