微信小程序——顶部搜索框

一点小小的声明：学习笔记，若有不妥之处还望指正，Thanks♪(･ω･)ﾉ

参考视频微信小程序实例——从入门到精通

效果展示：

步骤： 

首先需要建立一个存放图片的文件夹images，该文件夹放置在最外层。将此图放入文件夹。后续需要使用的图片也都可以放入此文件夹中。

当然也可以去阿里巴巴矢量图标库 找寻并下载你所需要的图标哦~

接下来在需要添加顶部搜索框的页面文件夹中添加如下代码：

 wxml代码：

<!-- 顶部搜索框实现 -->
<view id="searchOuterView">
   <view id="searchInnerView">
    <image src="/images/search.png"></image>
    <text> 搜索</text>
  </view>
</view>

 wxss代码：

/* 顶部搜索框样式 */
#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;
}

编写好以后就完成了一个顶部搜索框啦~