微信小程序实现搜索功能以及效果(超详细)

太过爱你忘了你带给我的痛 2023-07-25 09:51 138阅读 0赞

我们先来看一下实现哪些功能:

1 搜索历史记录以及清空历史记录

2 热门搜索推荐以及更新推荐内容

3 根据输入框输入的内容来自动搜索相关查询,后台逻辑是模糊查询,后台就先不扯了

这里我用的是自己定义的虚拟数据,暂时没用后台接口,可能有点问题,希望大家指出,共同解决,一起进步

好了废话就不多说了,我们先看看代码吧

### **wxml** ###

<view class="navbar custom-class" style='height:{
       {navHeight}}px;'>
      <view class="navbar-action-wrap navbar-action-group row item-center" style='top:{
       {navTop}}px;'>
        <image style="width: 1rem; height: 1.2rem; " src="{
       {leftIcon}}" catchtap="goBack"></image>
      </view>
      <view class='navbar-title' style='top:{
       {navTop}}px'>
        <view class="search-input">
          <span class="search-con">
            <view class="center-30f2b4d">
              
              <image class="icon" src="{
       {searchIcon}}" catchtap="searchbegin" data-postname="{
       {inputValue}}"></image>
              <input class="search-size" confirm-type="search" value="{
       {inputValue}}" type="text" bindinput="getInputValue" placeholder="搜索品牌或商品" placeholder-class="phcolor"></input>
            </view>
          </span>
        </view>
      </view>
    </view>
    
    <view class="read-in">
      
        <view class="headline" wx:if="{
       {historyStorage.length!=0}}" hidden="{
       {historyStorageShow?false:true}}">
          <view class="head-headline justify">
            <view class="headline-size">最近搜索</view>
            <view class="right size" catchtap="remove">清除</view>
          </view>
          
          <view class="lately-main">
            <view class="chunk" wx:for="{
       {historyStorage}}" wx:key="index" bindtap='routeToSearchResPage' data-index='{
       {index}}'>
              <text>{
       {item}}</text>
            </view>
          </view>
          
        </view>
        
        
        <view class="headline">
          <view class="head-headline">
            <view class="headline-size">热门搜索</view> 
            <view class="liang">
              <view class="low-bo">
                <image class="icon-eye low-bottom" bindtap="reye" src="{
       {eyeIconOne}}" hidden="{
       {!eye}}"></image> 
                <image class="icon-eye low-bottom" bindtap="reye" src="{
       {eyeIcon}}" hidden="{
       {eye}}"></image> 
              </view>
              <view class="right size" bindtap="changeother">换一批</view>
            </view>
          </view>
          
          <view class="lately-main" hidden="{
       {eye?false:true}}">
            <view class="chunk" wx:for="{
       {falg ? hotsearch1 : hotsearch2}}" wx:key="index">
              <text>{
       {item.title}}</text>
            </view>
          </view>
          
        </view>
        
    </view>
    
    
    
    <view class="searchresult" wx:if="{
       {inputValue != ''}}" hidden="{
       {searchresult?false:true}}">
      <view class="result" wx:for="{
       {searchResult}}" catchtap="searchbegin" wx:key="index" bindtap="getInputValue" data-postname="{
       {item.result}}">
        <view>{
       {item.result}}</view>
        <image src="{
       {upperLeftArrow}}"></image>
      </view>
    </view>

大家应该都能看懂吧,可能有人就会问了

<view class="result" wx:for="{
       {searchResult}}" catchtap="searchbegin" wx:key="index" bindtap="getInputValue" data-postname="{
       {item.result}}">
        <view>{
       {item.result}}</view>
        <image src="{
       {upperLeftArrow}}"></image>
      </view>

为什么这个wx:for用了两个点击事件,catchtap和bindtap,如果用两个catchtap或者bindtap可不可以,这里我就告诉你,不可以,亲测,会有冲突

### 我们先回顾一下catchtap和bindtap区别:  ###

*  DOM模型是一个树形结构，在DOM模型中，HTML元素是有层次的。当一个HTML元素上产生一个事件时，该事件会在DOM树中元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程就是DOM事件流。
 *  JS冒泡事件：当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的（**所有祖先元素）**中被触发。这 一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层

### 共同点: ###

在微信小程序的事件机制中，bindtap和catchtap都可以触发一个组件的点击事件

### 区别: ###

**bindtap不能阻止事件冒泡**

**catchtap可以阻止事件冒泡**

### **wxss** ###

page {
        background: white;
    }
    .navbar {
      width: 100%;
      overflow: hidden;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
      flex-shrink: 0;
      background-color: white;
    }
    
    .navbar-title {
      width: 100%;
      box-sizing: border-box;
      padding-left: 40px;
      padding-right: 120px;
      height: 33px;
      line-height: 33px;
      position: fixed;
      left: 0;
      z-index: 10;
      color: #333;
      font-size: 16px;
      font-weight: bold;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      display: flex;
    }
    
    .navbar-action-wrap {
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      left: 10px;
      z-index: 11;
      line-height: 1;
      padding-top: 4px;
      padding-bottom: 4px;
      position: fixed;
    }
    
    .navbar-action-group {
      border-radius: 20px;
      overflow: hidden;
    }
    
    .navbar-action_item {
      padding: 3px 0;
      color: #333;
    }
    
    .navbar-action-group .navbar-action_item {
      border-right: 1px solid #f0f0f0;
      padding: 3px 14px;
    }
    
    .navbar-action-group .last {
      border-right: none;
    }
    
    .navbar-title-size {
      font-size: 10px;
      margin-right: 20rpx;
      align-self: center;
      margin: 0 auto;
    }
    
    .navbar-title-size.active {
      color: red;
      border-bottom: 2px solid red;
    }
    
    .scroll-box {
      position: absolute;
      height: 100%;
    }
    
    .search-input {
      width: 100%;
      height: 28px;
      line-height: 28px;
      background: #f6f6f6;
      border-radius: 30rpx;
      /* margin-top: 2px; */
      font-size: 25rpx;
    }
    
    .search-con {
      display: flex;
      align-items: center;
    }
    .search-con .center-30f2b4d {
      height: 28px;
      line-height: 28px;
      flex: 1;
      display: flex;
      align-items: center;
    }
    .search-con .center-30f2b4d .icon {
      width: 15px;
      height: 15px;
      align-self: center;
      margin: 0 10px;
    }
    .search-con .center-30f2b4d .search-size {
      width: 60%; 
      font-size: 12px;
      font-family: "微软雅黑";
    }
    .phcolor {
      color: #D3D3D3;
    }
    /* nav E */
    /* 标题部分 */
    .read-in {
      margin-top: 64px;
      padding: 0 40rpx;
    }
    .headline {
      padding-top: .5rem;
    }
    
    .head-headline {
      width: 100%;
      height: 45rpx;
      position: relative;
      display: flex;
    }
    .liang {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    .justify {
      display: flex;
      justify-content: space-between;
    }
    .headline-size {
      width: 185rpx;
      font-size: 35rpx;
      float: left;
    }
    
    .low-bo {
      /* flex: 1; */
      height: 45rpx;
      position: relative;
      align-self: center;
    }
    .low-bottom {
      /* position:absolute; */
      bottom:0px;
      padding:0 10rpx  0;
      margin:0px;
    }
    .size {
      /* flex: 1; */
      float: right;
      font-size: 30rpx;
      color: #d4237a;
      /* position: absolute; */
      bottom:0px;
      align-self: center;
     
    }
    
    /* 内容部分 */
    .lately-main {
      margin-top: 20rpx;
      overflow: hidden; 
    }
    .lately-main .chunk {
      display: inline-block;
      font-size: 25rpx;
      line-height: 20rpx;
      padding: 20rpx 20rpx;
      background: #f5f5f5;
      margin-right: 30rpx;
      border: 1px solid #DCDCDC;
      border-radius: 30rpx;
      margin-bottom: 30rpx;
      float: left;
    }
    
    .searchresult {
      margin-top: 20px; 
      position: absolute;
      top: 55px;
      left: 0;
      width: 100%;
      background: #fff;
    }
    .result {
      height: 50px;
      line-height: 50px;
      text-align: left;
      border-bottom: 1px solid #eee;
      padding: 0 30rpx;
      color: #333;
      font-family: "微软雅黑";
      font-size: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .result image {
      width: 50rpx;
      height: 50rpx;
    }

css就不用说太多了吧,不过有个小bug,我在调试的时候发现的,不过很好解决,这里就不多说了

### **js** ###

js基本上都有备注,这里就不说太多了,我就说一下这个函数吧

searchbegin: function (e) {
        let _this = this
        var data = e.currentTarget.dataset;
        _this.data.replaceValue = e.currentTarget.dataset.postname
        // _this.data.replaceValue = 
        wx: wx.setStorage({
          key: 'historyStorage',
          data: _this.data.historyStorage.concat(_this.data.inputValue),
          data: _this.data.historyStorage.concat(_this.data.replaceValue)
        })
        // console.log(_this.data.inputValue)
        // console.log(_this.data.historyStorage)
        wx.navigateTo({
          url: '../../commodity/commodity-search-list/index?postName=' + data['postname']
        })
      },

自定义的data在点击执行这个函数的时候获取input框输入的value值,这个应该都明白吧

\_this.data.replaceValue这个是在data里面定义了一个变量名为replaceValue,然后将e.currentTarget.dataset.postname获取到的值赋值给replaceValue,下面的就不用多说了吧,将拿到的值存储到historyStorage空列表里面,下面的是点击搜索跳转到的结果列表

最后给大家看一下效果图吧

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 5][]

很简单,也很繁琐,不过还是看项目设计,这样用户体验很不错

如果对你有帮助希望关注一下,多多支持,有什么问题可以下方留言共同学习

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: /images/20230528/3d3ae4be234b414eafb4110a5f0caa0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1]: /images/20230528/9eee880d739c4e2389c21b86d96885e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 2]: /images/20230528/ca7d1292613940eeb4504784a8077f7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 3]: /images/20230528/9043a97224d94576ae30c41a318ea2b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 4]: /images/20230528/149bf50e48b34162ba127aec166c69c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 5]: /images/20230528/be7a47046ee64e0996508d58a0b2e19e.png