微信小程序开发一个小型商城（十、搜索商品页面页面）

上一篇文章：微信小程序开发一个小型商城（九、意见反馈页面）
在最开始的主界面当中的自定义组件的搜索栏，是要满足搜索需求的，根据关键字进行搜索，在上方还需要定义一个input文本输入框加上一个表示取消的按钮，下方的搜索结果使用一个for循环遍历出结果，在使用position的定位后使用flex对input和按钮进行分区3:1。

Js文件当中，在发送请求时候的需要带上一个参数query，表示对应传递过来的关键字，将返回结果的值赋给goods，而在上方的渲染当中就是对goods变量的渲染，以及商品名称只能占据一行，同前面的代码一样，多的使用…代替。当点击取消按钮之后同样绑定一个单击事件，对所有的值重新定义为null，就相当于回到最开始。给input标签绑定事件使用的是bindinput 以及一个value参数，即搜索的关键字，在detail当中的value值即为输入框的值，还需要检验合法性，最后发送请求，在这里会发现当没有使用一个定时器的时候，每输入一个字符都会发送一次请求，这就需要实用到一个定时器，表示输入完成后再发送请求，给定一个定时器id Timeid:1,再使用到一个setTimeout表示定时的时间，在这里给定1000即1秒，还需要对定时器进行清空，使用clearTimeout。其中，防抖 ：一般用于输入框，防止重复输入 重复发送数据请求 。节流 ：一般用于上拉和下拉事件。可以在AppData当中查看返回的值。

以及发送请求的时候自会发送一次请求，在NetWork当中查看。

代码如下所示：
wxml

<view class="search_row">
    <input value="{{inValue}}" placeholder="请输入需要搜索的商品" bindinput="handleInput"></input>
    <button hidden="{{!isFocus}}" bindtap = "handleCancel">取消</button>
</view>
<view class="search_content">
    <navigator class="search_item" wx:for="{{goods}}" wx:key="goods_id"  url="/pages/goods_detail/main?goods_id={{item.goods_id}}">
       {{item.goods_name}}
    </navigator>
</view>

less

page {
  background-color: #dedede;
  padding: 20rpx;
}
.search_row {
  height: 60rpx;
  display: flex;
  input {
    background-color: #fff;
    height: 100%;
    flex: 3;
    padding-left: 30rpx;
  }
  button {
    flex: 1;
    display: flex;
    height: 100%;
    width: 110rpx;
    font-size: 26rpx;
    padding: 0;
    margin: 0 10rpx;
    justify-content: center;
    align-items: center;
  }
}
.search_content {
  margin-top: 30rpx;
  .search_item {
    font-size: 26rpx;
    background-color: #fff;
    padding: 15rpx 10rpx;
    border-bottom: 1px solid #ccc;

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

js

import { request } from "../../request/index.js";
import regeneratorRuntime from "../../lib/runtime/runtime";
Page({
  data: {
    goods:[],
    //取消按钮是否显示
    isFocus:false,
    //输入框的值
    inValue:""
  },
  //定时器id
  Timeid:1,
  onLoad: function (options) {},
  onShow: function () {},
  //绑定input单击事件。
  handleInput(e) {
    //在detail当中的value值即为输入框的值
    //console.log(e);
    const { value } = e.detail;
    //检验合法性
    if (!value.trim()) {
      //值不合法
      this.setData({
        isFocus:false,
        goods:[]
      })
      return;
    }
    this.setData({
      isFocus:true
    })
    //防抖 ：一般用于输入框，防止重复输入 重复发送数据请求 
    //节流 ：一般用于上拉和下拉事件、
    clearTimeout[this.Timeid];
    this.Timeid=setTimeout(() => {
      //发送请求获取数据，
      this.qsreach(value);   
    }, 1000);
  },
  //发送请求的函数
  async qsreach(query) {
    const res = await request({ url: "/goods/qsearch", data: {query} });
    console.log(res);
    this.setData({
      goods:res
    })
  },
//点击取消按钮
  handleCancel(e){
    this.setData({
      inValue:"",
      isFocus:false,
      goods:[]
    })
  }
});

至此，一个简单的微信小程序的小型商城的基本开发就已大部分实现。感谢你的预览。