【uniapp】搜索框防抖、自动获取焦点

1.搜索框基本UI结构

​

<view class="search-box">
  <!-- 使用 uni-ui 提供的搜索组件 -->
  <uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar>
</view>

        

          
        
        
        

          

          AI 代码解读
        
      
      

​

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

​

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

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: ''
  }
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

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

​

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

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

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

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

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