???欢迎来到???
??魔术之家！！??

该文章收录专栏
? 2022微信小程序京东商城实战 ?

专栏内容
? 京东商城uni-app项目搭建 ?
? 京东商城uni-app 配置tabBar & 窗口样式 ?
? 京东商城uni-app开发之分包配置 ?
? 京东商城uni-app开发之轮播图 ?
? 京东商城uni-app之分类导航区域 ?
? 京东商城uni-app 首页楼层商品 ?
? 京东商城uni-app 商品分类页面（上） ?
? 京东商城uni-app 商品分类页面（下） ?
? 京东商城uni-app之自定义搜索组件（上） ?
? 京东商城uni-app之自定义搜索组件（中） ?

文章目录

• 一、 渲染UI结构
• 二、 input事件处理
• 三、搜索框自动获取焦点
• 四、防抖处理
• 五、根据关键词查询搜索建议列表
• • 5.1 数据请求
  • 5.2 渲染UI结构
  • 5.3 点击建议跳转详情页

一、 渲染UI结构

• 可在开发工具中添加该页面编译模式（每次编译即在该页面）

使用uni-app官方搜索组件可快速搭建 输入框

通过官方组件提供的搜索组件以及自定义结构如下

1

效果：

• 设置背景方法一（用view包裹，设置样式）：

• 效果（一样）

• 添加吸顶效果（保持在页面顶部）

  .search-box {
  // 吸顶
  position: sticky;
  top: 0;
  z-index: 999;
  }

二、 input事件处理

在input组件中，输入的值都在input对该函数所传的参数中（不是e.value，官方将input事件绑定事件结构为value值）

 methods: {
      // 搜索框input事件处理
      input(e){
        console.log(e)  // 输出对应值
      } 
    }
1
2
3
4
5
6

效果

三、搜索框自动获取焦点

实现在用户点击搜索框 跳转到搜索页面时，搜索框自动获取焦点（可输入）

• 在官方组件源文件修改如下show , showsync属性为true(使其判断为真，焦点为真显示）
  
• 修改如下
  
• 注意（预览效果需要在真机上预览，开发工具上与真机或多或少有些不兼容）：
  

四、防抖处理

可以看到，每次输入键入一次数据都会触发一次input请求，我们设置在五百毫秒内用户输入数据时不触发请求，五百毫秒后用户没有输入数据时触发请求，实现 防抖处理

这里我们通过JavaScript 延时器中的setTimeout和clearTimeout实现(延时与取消延时）

• setTimeout语法格式

  setTimeout(要执行的代码, 等待的毫秒数)
  setTimeout(JavaScript 函数, 等待的毫秒数)

• clearTimeout语法格式

  clearTimeout() 方法可取消由 setTimeout() 方法设置的定时操作。
  clearTimeout() 方法的参数必须是由 setTimeout() 返回的 ID 值（对应取消）。

• 最终实现代码（注意 timer 是全局变量）

  data() {
  return {
  inputString: ‘’,
  timer: null
  };
  },
  methods: {
  // 搜索框input事件处理
  input(e) {
  // 触发事件 取消赋值操作
  clearTimeout(timer)
  // 500毫秒后赋值
  timer = setTimeout(() => {
  this.inputString = e
  console.log(this.inputString)
  }, 500)
  }

效果：

五、根据关键词查询搜索建议列表

5.1 数据请求

• 请求参数

参数名

参数说明

备注

query

查询内容

如： goods/qsearchquery=小米

• 接口数据样式

  {
  “message”: [
  {
  “goods_id”: 57332,
  “goods_name”: “400毫升 海鲜食品冷藏冰包 注水冰袋医用冰袋户外冷藏保鲜熟食冷藏反复使用（10个装）”
  },
  {
  “goods_id”: 57194,
  “goods_name”: “亿力洗车工具汽车美容用品海绵刷不伤车漆擦车海棉清洁海绵”
  }
  ],
  “meta”: {
  “msg”: “获取成功”,
  “status”: 200
  }
  }

• 定义data数据节点searchResults

  data() {
    return {
      inputString: '',
      timer: null,
      searchResults: ''
    };
  },
  1
  2
  3
  4
  5
  6
  7

• 再input事件处理函数中调用 获取数据函数getsearchList

  input(e) {
  // 触发事件 取消赋值操作
  clearTimeout(this.timer)
  // 500毫秒后赋值
  this.timer = setTimeout(() => {
  this.inputString = e
  this.getSearchList()
  }, 500)
  }

• 定义getsearchList函数（判断是否为空格和空字符串）

  async getSearchList() {
  // 如果是空字符串则 不请求
  if (this.inputString == ‘’) {
  this.searchSuggest = []
  return
  }
  // 如果为空格，则报错
  else if (this.inputString.trim() === ‘’) return uni.$showMsg(‘输入内容有误’)

      const {
        data: res
      } = await uni.$http.get('/api/public/v1/goods/qsearch', {
        query: this.inputString
      })
      // 请求错误报错
      if (res.meta.status != 200) return uni.$showMsg()
      // 赋值
      this.searchSuggest = res.message
    },
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

• 效果(可以看到searchList成功接受到了值）：
  

• 输入空格报错
  

5.2 渲染UI结构

• 结构

  
  
    {{product.goods_name}}
    
  
  1
  2
  3
  4
  5

• 样式

  .sgg-list-container {

  .sgg-item {
  display: flex;
  background-color: #fff;
  align-items: center;
  border-top: 3rpx solid #efefef;
  justify-content: space-between;
  padding: 20rpx 10rpx;

  .sgg-name {
  // 不允许换行
  white-space: nowrap;
  // 超出不显示
  overflow: hidden;
  // 超出文本用ellipsis代替
  text-overflow: ellipsis;
  margin-right: 5rpx;
  font-size: 28rpx;
  }
  }
  }

效果：

5.3 点击建议跳转详情页

• 方法一 组件式跳转： 将view 改为 navigator组件 并传商品ID参数

结构

 
    
    
      {{product.goods_name}}
      
    
  
1
2
3
4
5
6
7

• 方法二 编程式跳转: 绑定click 事件，定义函数

  
  
    {{product.goods_name}}
    
  
  1
  2
  3
  4
  5

  gotogoodlist(item){
  uni.navigatorto({
  url = “‘/subpackages/goods_list/goods_list?cat_id=’ + item.goods_id”
  })

效果：

?谢谢你的阅读，您的点赞和收藏就是我创造的最大动力！?
1

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦