微信小程序：模糊查询--防抖和数据节流

微信小程序–搜索页面（核心）

包含功能点：

• 模糊查询
• 防抖和数据节流

结构：search.wxml

    
    


    
    {{item.goods_name}}
    

样式：search.less

page {
  background-color: #dedede;
  padding: 20rpx;
}

.search_row {
  height: 60rpx;
  display: flex;

  input {
    flex: 1;
    height: 100%;
    background-color: #fff;
    padding-left: 30rpx;
  }

  button {
    width: 110rpx;
    height: 100%;
    font-size: 26rpx;
    padding: 0;
    margin: 0 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.search_content {
  margin-top: 30rpx;

  .serch_item {
    padding: 15rpx 0;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    font-size: 26rpx;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

逻辑：search.js文件

// pages/search/search.js
import {request} from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    goods: [],
    // 取消 按钮 是否显示
    isFocus: false,
    // 输入框的值
    inputValue: ""
  },
  TimeId: -1,
  // 输入框的值改变  就会触发的事件
  handleInput(e){
    // 1.获取输入框的值
    const {value} = e.detail;
    // 2.验证合法性
    if(!value.trim()){
      this.setData({
        goods: [],
        isFocus: false
      })
      // 值不合法
      return
    }
    // 3.准备发送请求获取数据
    this.setData({
      isFocus: true
    })
    clearTimeout(this.TimeId);
    this.TimeId=setTimeout(()=>{
      this.qsearch(value);
    },1000)
  },
  // 点击取消按钮
  handleCancel(){
    this.setData({
      inputValue: "",
      isFocus: false,
      goods: []
    })
  },
  // 发送请求获取搜索建议  数据
  async qsearch(query){
    const res = await request({url: "/goods/qsearch",data: {query}});
    console.log(res)
    this.setData({
      goods: res
    })
  }
})

页面配置文件：search.json文件

{
  "usingComponents": {},
  "navigationBarTitleText": "搜索中心"
}