uni-app开发中遇到的技巧

渴望看海的少年

已于 2022-03-23 22:53:18 修改

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：框架文章标签： javascript

于 2022-03-23 18:37:37 首次发布

本文链接：https://blog.csdn.net/DespairA/article/details/123693135

本文介绍了在uni-app开发中的一些实用技巧，包括搜索框的防抖处理、解决数组顺序问题、去除数组重复项以及如何持久化保存历史记录到本地。通过防抖函数减少搜索事件的频繁触发，使用Set处理数组重复，以及利用uni-app的本地存储API进行数据管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.搜索的防抖处理

这里是一个搜索框，ui组件库内定义了每次搜索框的值发生变化都会触发input事件函数

  <uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar>

在js代码中进行防抖处理

input(e){
        // console.log(e.value)
        // 定义一个延时器,规定500毫秒以后执行，并赋给this.timer
        // 清除延时,因为每次搜索框内的值变化都会执行清除，就会将上一次变化的延时清除掉，然后再下一行代码进行新的延时，就完成了防抖的处理
        clearTimeout(this.timer)
       this.timer = setTimeout(()=>{
          console.log(e.value)
        },500)
      }

清除延时,因为每次搜索框内的值变化都会执行清除，就会将上一次变化的延时清除掉，然后在下一行代码进行新的延时，就完成了防抖的处理

data() {
      return {
        // 定义一个延时器timerID
        timer:null,
        // 搜索关键词，用于后续发送请求
        kw: ''
      };
    },

input(e) {
  // 清除 timer 对应的延时器
  clearTimeout(this.timer)
  // 重新启动一个延时器，并把 timerId 赋值给 this.timer
  this.timer =

最低0.47元/天解锁文章

200万优质内容无限畅学