原生微信小程序，搜索框（search）组件-蒲公英云

原生微信小程序，搜索框（search）组件

在这里插入图片描述
首先创建组件及两个跳转页面，第一个是搜索框所在的页面（首页），第二个是搜索详细页
搜索框的本质是：搜索框不是input，而是navigate，跳转到专门的搜索页，搜索结果会呈现在这一页
先创建三个文件
在这里插入图片描述

标题selectPage页面的编写

在 selectPage.wxml 文件里引入搜索框组件
引入组件之前记得在 selectPage.json 文件中配置组件

{ 
  "usingComponents": { 
    "search": "../../components/select"
  }
}
<!-- 父组件向子组件传递参数，使用属性的形式，子组件通过 properties进行参数接收 -->
<search urlPath="{ {urlPath}}" url="../selectResult/selectResult"></search>

最后在 JS 文件中设置url路径，因为我们的目的是制作组件，所以参数这块都由父组件传递过去
到这里，selectPage 的任务基本完成了

Page({ 
  data: { 
    urlPath: "../selectResult/selectResult"
  },
  onLoad: function (options) { 
  }
})

组件的编写

搜索组件的基本结构层写一下

<view class="search_wrap">
    <navigator url="{ {urlPath}}">
        搜索
    </navigator>
</view>

css样式也随便改一改，自己看的舒服就行，这里用的是less语言

/* components/select.wxss */
.search_wrap { 
    width: 100%;
    height: 80rpx;
    background-color: #eb4450;
    display: flex;
    justify-content: center;
    align-items: center; navigator { 
        text-align: center;
        padding: 10rpx;
        width: 90%;
        background-color: #fff;
        color: #6b6b6b;
        border-radius: 20rpx;
    }
}

JS文件中接收一下来自父元素传递过来的URL路径参数

// components/select.js
Component({ 
  properties: { 
    urlPath: { 
      type: String
    }
  },
  data: { 
  },
  methods: { 
  }
})

selectResult 页面的编写

结构层

<view class="search_row">
    <input value="{ {inputValue}}" bindinput="handleInput" class="inp" placeholder="请输入"></input>
    <button class="btn" bind:tap="handleCanle">取消</button>
</view>
<view class="search_content">
    <view class="search_item" wx:for="{ {searchResult}}">{
   {item.goods_name}}</view>
</view>

表示层

page { 
    background-color: #ebebeb;
    padding: 20rpx;
}
.search_row { 
    height: 60rpx;
    display: flex; .inp { 
        background-color: #fff;
        height: 100%;
        padding-left: 20rpx;
        flex: 4;
        border-radius: 5rpx;
    }
    .btn { 
        width: 110rpx;
        height: 100%;
        font-size: 26rpx;
        font-weight: normal;
        padding: 0;
        margin: 0 0 0 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
.search_content { 
    margin-top: 30rpx; .search_item { 
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        background-color: #fff;
        border-bottom: 1px solid #7e7e7e;
        height: 60rpx;
        padding: 10rpx;
        font-size: 26rpx;
    }
}

行为层

// pages/selectResult/selectResult.js
Page({ 
  data: { 
    // 定义搜索结果变量，初始化为空数组
    searchResult: [],
    // 定义inputValue，输入框的input值，初始化为空
    inputValue: ""
  },
  handleInput: function (e) { 
    // 获取输入框的值
    const {  value } = e.detail
    // 合法性验证，去除前后空格，防止打很多空格也会发送请求
    // 去除空格后的值是合法值了，再取反，为不合法值，不合法搜索结果清空
    if (!value.trim()) { 
      this.setData({ 
        searchResult: [],
      })
      // 值不合法，直接return掉，不用执行下面的了
      return;
    }
    /** * 防抖动功能 * 1 如果第一次输入的值合法，会执行this.TimeId这个定时器，然后一秒钟之后发送请求 * 2 如果在这1秒钟的延迟内，用户重新做了输入，重新触发handleInput方法时，会执行clearTimeout * 将上一个定时器请求杀掉，然后再执行新的定时器函数，直到用户1庙后都没有新的输入后，才会发送请求 */
    clearTimeout(this.TimeId)
    this.TimeId = setTimeout(() => { 
      this.qSearch(value)
    }, 1000)
  },
  // qSearch 发送请求函数（参数为输入框中的值）
  qSearch: function (query) { 
    // 定义一个加载中的提示
    wx.showLoading({ 
      title: '加载中...',
    })
    // 发送请求wx.request，微信封装好的ajax请求
    // 参数有两个需要传递的
    // url，接口地址
    // data，搜索的关键词，这边接口会自动处理并返回带有关键词的内容，
    // 不是因为wx.request又会发送ajax，还会给你自动筛选
    wx.request({ 
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch',
      data: {  query },
      // 请求成功时调用
      success: (result) => { 
        // 将获取的值，赋值给定义的searchResult，WXML文件获取渲染
        this.setData({ 
          searchResult: result.data.message
        })
        // 成功获取数据后，把加载中的提示关掉
        wx.hideLoading({ 
          complete: (res) => {  },
        })
      }
    });
  },
  // 取消按钮函数
  handleCanle: function () { 
    this.setData({ 
      searchResult: [],
      inputValue: ""
    })
  }
})