嗨客网搜索
微信小程序搜索功能

微信小程序搜索功能教程

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

代码

前期工作,我们可以到 Iconfont 上面下载一个搜索小图标的图片。将图片存放在项目里面,新建一个 imgaes 文件夹,我们可以将下载好的图片命名为 searchimages 文件夹目录和 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 模式将 imageinput 两个组件进行横向布局排列。设置图片大小将 imageinput 两个组件联系在一起。我们对最外层的 view 控件加了背景颜色并且将其边框变成圆弧形。

效果

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

07 搜索功能效果图.png

搜索功能总结

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

嗨客网顶部