当前位置：首页 > news >正文

小程序实现搜索框组件

news 2025/6/29 3:28:28

使用搜索框需要使用自定义组件，在主界面引入搜索组件，并在点击搜索框后跳转到搜索页面

创建组件Search目录

在pages同级，创建名为components的目录，该目录用于存放小程序项目中用到的自定义组件

在components下，创建文件夹search用于存放新组件search

创建组件search

选择search目录，右键选择新建Component

主页界面中引入搜索组件

根据app.json中的内容可以得出，小程序的主页是index

"pages": ["pages/index/index","pages/logs/logs"],

在index.json文件中添加以下内容，用于引入组件

{"usingComponents": {"search": "/components/search/search"}
}

其中search是新建的组件名，"/components/search/search"是组件路径

主页wxml中引入组件，在index.wxml中添加以下内容

<text>这是主页，下面引入了搜索组件</text>
<search></search>

实现搜索组件search

搜索控件由两部分组成，包含了搜索控件和跳转界面

搜索控件的样式如下所示：

components/search/search.wxml

<!--components/search/search.wxml-->
<view class="search_container"><navigator class="search_nav" url="/pages/productSearch/productSearch"><icon type="search" size="24"></icon><span>搜 索</span></navigator>
</view>

components/search/search.wxss

/* components/search/search.wxss */
.search_container{height: 80rpx;padding: 10rpx 0rpx;background-color: #5de75d;
}
.search_nav{height: 100%;margin: 0rpx 7rpx;display: flex;justify-content: center;align-items: center;background-color: #FBFBFF;color: gray;border-radius: 13rpx;
}

search.wxml中包含了url，这里标识了跳转的page的路径，因为我们需要手动创建一个文件夹并新建page