一点小小的声明：学习笔记，若有不妥之处还望指正，Thanks♪(･ω･)ﾉ
参考视频微信小程序实例——从入门到精通
效果展示：
步骤：
首先需要建立一个存放图片的文件夹images，该文件夹放置在最外层。将此图放入文件夹。后续需要使用的图片也都可以放入此文件夹中。
当然也可以去阿里巴巴矢量图标库 找寻并下载你所需要的图标哦~
接下来在需要添加顶部搜索框的页面文件夹中添加如下代码：
wxml代码：
<!-- 顶部搜索框实现 -->
<view id="searchOuterView">
<view id="searchInnerView">
<image src="/images/search.png"></image>
<text> 搜索</text>
</view>
</view>wxss代码：文章来源：https://www.toymoban.com/news/detail-510040.html
/* 顶部搜索框样式 */
#searchOuterView{
/* 设置内边距 */
padding: 15rpx;
}
#searchInnerView{
/* 内容居中 */
text-align: center;
/* 设置宽高 */
width: 720rpx;
height: 58rpx;
/* 设置背景颜色 */
background: #f5f5f5;
/* 设置边框 */
border:2rpx solid #ECECEE;
/* 设置边框圆角 */
border-radius: 8rpx;
/*设置行高*/
line-height: 52rpx;
/* 设置边框包含在宽高之内 */
box-sizing: border-box;
}
#searchInnerView > image{
/* 搜索图片宽高 */
width: 32rpx;
height: 32rpx;
/* 设置垂直对齐 */
vertical-align: middle;
}
#searchInnerView > text{
/* 搜索文字大小颜色 */
font-size:24rpx ;
color: #B2B2B2;
}编写好以后就完成了一个顶部搜索框啦~文章来源地址https://www.toymoban.com/news/detail-510040.html
到了这里，关于微信小程序——顶部搜索框的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
