微信小程序搜索功能系列一套全

最新推荐文章于 2024-07-03 19:38:04 发布

置顶

*玛卡巴卡*

最新推荐文章于 2024-07-03 19:38:04 发布

阅读量3.8k

点赞数 4

分类专栏：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_45616142/article/details/107993075

版权

本文介绍了如何在微信小程序中实现首页搜索功能，通过创建组件来完成搜索框的搭建，包括WXML、JS和CSS代码实现。此外，详细讲述了Tab切换样式的动态展示，利用点击事件和数据绑定实现样式切换。还涵盖了搜索逻辑，涉及输入值匹配、数组遍历和数据显示。最后提到了在分类页面复用搜索组件的方法。

摘要由CSDN通过智能技术生成

今天说一下小程序首页的搜索功能吧

在这里插入图片描述

这个搜索功能我是建了一个组件，用组件写的：

在这里插入图片描述
上代码：
wxml代码

<view class="search">
  <input placeholder="输入搜索关键词" type="text" class="search_input" data-value="value" bindconfirm="search"></input>
  <image src="/assets/search.png" class="search_img"></image>
</view>

js代码：

// components/zj_search/zj_search.jsz

Component({
   
  /**
   * 组件的属性列表
   */
  properties: {
   

  },

  /**
   * 组件的初始数据
   */
  data: {
   
  },

  /**
   * 组件的方法列表
   */
  methods: {
   
    search: function (e) {
   
      // 拿到输入框的值
      var value  = e.detail.value
      // console.log(value);
        wx.navigateTo({
   
          url: `/pages/zj_detail_search/zj_detail_search?value=${
     value}`
        })
    }
  }
})

css代码：

/* components/zj_search/zj_search.wxss */
 
.search{
   
  border: 1rpx solid gainsboro;
  border-radius: 20rpx;
  display: flex;
  position: absolute;
  top: 20rpx;
  width: 90%;
  height: 50rpx;
  line-height: 70rpx;
  padding: 10rpx;
  left: 27rpx;
  z-index: 2;
  background: rgba(248, 245, 245, 0.5);
}
.search_input{
   
  width: 690rpx;
  /* border: 1rpx solid red; */
  height: 50rpx;
  line-height: 60rpx;
  padding-left: 20rpx;
}
.search .search_img{
   
  z-index: 1;
  width: 40rpx;
  height: 40rpx;
  /* margin-left: 240rpx; */
  margin-top: 7rpx;
}

以上搜索组件就建好了，绑了一个value值，添加了一个事件。
搜索点进来之后会跳到这个页面，先不说别的，会看见搜索框右边有一个切换图标，点击会切换样式，大概就是下面这样：
在这里插入图片描述

然后我就写了两套布局，两套样式，用最原始的点击显示隐藏的办法完成这个功能：
代码如下：
wxml代码

<!--pages/zj_detail_search/zj_detail_search.wxml-->
<!--components/zj_search/zj_search.wxml-->
<view class="box">
  <view class="search_box">
    <view class="search">
      <input placeholder="输入搜索关键词" type="text" class="search_input" value="{
   {name}}" data-name="name" bindconfirm="search"></input>
      <image src="/assets/search.png" class="search_img"></image>
    </view>
    <view class="switch" catchtap="clicka" hidden="{
   {hiddenimga}}">
      <image src="../../assets/a.png"></image>
    </view>
    <view class="switch" catchtap="clickb" hidden="{
   {hiddenimgb}}">
      <image src="../../assets/b.png"></image>
    </view>
  </view>
  <!-- tab切换 -->
  <view class="tab_list">
    <view wx:for="{
   {tabList}}" wx:key="item.id" class="{
   { index===currentIndex? 'active':'' }}" catchtap="changeTab" data-index="{
   { index }}">
			<view class="tab_content">{
   {
   item.tabName}}<