微信小程序搜索功能

微信小程序搜索功能教程

搜索在小程序中是比较常见的，要达到一个好的搜索功能，我们可以用 image 和 input 两个组件来制作查询功能。

代码

前期工作，我们可以到 Iconfont 上面下载一个搜索小图标的图片。将图片存放在项目里面，新建一个 imgaes 文件夹，我们可以将下载好的图片命名为 search 。images 文件夹目录和 pages 文件夹同级。

06 创建图片文件夹.png

wxml文件

<view class="search">
  <image src="/images/search.png" class="searchImage"></image>
  <input placeholder="搜索" class="searchInput" />
</view>

wxss文件

.search {
  display: flex;
  margin: 30rpx;
  background-color: #EAEAEA;
  height: 80rpx;
  align-items: center;
  border-radius: 20rpx
}
.searchImage {
  padding: 0rpx 20rpx 0rpx;
  width: 50rpx;
  height: 50rpx;
  border: none;
}
.searchInput {
  width: 640rpx;
}

描述

首先，我们定义了一个 view 视图容器，以 flex 模式将 image 和 input 两个组件进行横向布局排列。设置图片大小将 image 和 input 两个组件联系在一起。我们对最外层的 view 控件加了背景颜色并且将其边框变成圆弧形。

效果

我们最终想要得到的功能结果如下

07 搜索功能效果图.png

搜索功能总结

这边我们只是实现了静态的搜索功能的绘画，用到了 image 和 input 组件。通过将两个组件的组合，就可以达到我们想要的效果。