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

  • 搜索框的组成
  • 定义布局容器
  • 微信小程序1个页面所对应的4个文件
  • 具体实现步骤
  • 框架实现
  • 样式实现


搜索框的组成

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

定义布局容器

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

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

  1. wxml文件 -> html文件
  2. wxss文件 -> css文件
  3. js文件 ->js文件
  4. json文件 -> 配置文件

具体实现步骤

框架实现

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

代码如下：

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

样式实现

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

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

最终代码如下：

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