微信小程序（第七章）- 搜索框的实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序（第七章）- 搜索框的实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

搜索框的组成

外部容器i
内部容器
两者关系:外部容器包裹内部容器，而且内部容器正好在we外部容器的居中（水平垂直居中）位置。

定义布局容器

可在微信小程序中使用view,可以在view里面定义内容。

微信小程序1个页面所对应的4个文件

wxml文件 -> html文件
wxss文件 -> css文件
js文件 ->js文件
json文件 -> 配置文件

具体实现步骤

框架实现

删除index.wxml里面的demo（模板）代码
定义两个嵌套view,布局容器的特点：宽度占据100%视口，但是高度是随着内容；在微信小程序中，定义布局容器使用的是view；可以在view里面定义内容。
在内部view引入图片和文字；在微信小程序中，定义图片使用的是image标签。
有了结构之后，效果并没有达到预期，那我们需要添加修饰，用来区分不同的元素，那我们可以给组件添加id属性（简单说就是起名）

代码如下：

<view id="searchOuterView">
    <view id="searchInnerView">
        <image src="/images/xsdkq_search.png"></image>
        <text>搜索</text>
    </view>
</view>

样式实现

首先明确微信小程序的样式都是写在对应的wxss文件中;

删除index.wxss里面的demo样式代码。
搜索图标太大，给图片设置大小。
1. 通过searchInnerView查找图片。
  #searchInnerView > image ->选择id为searchInnerView组件里面为image的组件
2. 标注图里面的pt,在微信小程序使用的单位是rpx;1pt=2rpx
给搜索文字设置大小和颜色；
给搜索文本添加一个空格，来开与图片的间距。
图片和文字居中，给searchInnerView设置内容居中；
给searchInnerView设置宽、高、背景颜色、边框、圆角；
图片和文字垂直水平居中，并且对齐；
1. 给searchInnerView里面的文字设置行高
2. 给图片和文字分别设置垂直对齐方式
给searchOuterView设置内边距
内边距：边框到内容的距离

最终代码如下：文章来源地址https://www.toymoban.com/news/detail-484407.html

/* 顶部搜索框样式 */
#searchOuterView{
  /*设置内边距*/
  padding:15rpx;
}
#searchInnerView{
  /*内容居中*/
  text-align: center;
  /* 设置宽高*/
  width: 720rpx;
  height:58rpx;
  /*设置背景颜色*/
  background:#eeeeee;
  /*设置边框*/
  border:2rpx solid #ececee;
  /*设置边框圆角*/
  border-radius: 8rpx;
  /*设置行高*/
  line-height: 52rpx;
  /*设置边框包含在宽高之内*/
  box-sizing: border-box;
}
#searchInnerView > image{
  /* 给图片设置宽和高 */
  width:36rpx;
  height:36rpx;
  /*设置垂直对齐方式*/
  vertical-align: middle;
}
#searchInnerView > image{
  /* 给文字设置大小 */
  font-size:24rpx;
  /* 给文字设置颜色 */
  color: #b2b2b2;
}