搜索框的组成

外部容器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设置内边距
内边距：边框到内容的距离

最终代码如下：

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

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

微信小程序--自定义组件之搜索框
组件:搜索框功能:根据输入框输入值进行模糊查询并在下方滑动框中显示功能图: component.wxml   &l ...
微信小程序自定义标题栏（搜索框）
(小白学习笔记) 1.首先在需要更改页面的json文件中加入"navigationStyle":"custom" 与"usingComponents& ...
微信小程序标题栏放logo 搜索框
效果图如下: 如果做成这样,标题栏上面放置自己的logo,绝对逼格满满,话不多说看操作: 第一步:选择你想要放置logo的页面,例如,index页面,找到此页面的json子页面,放置代码: {&quo ...
微信小程序+vue+taro：搜索框
需求:获取输入框的值完整代码 <template><view><view class="join"><view class=" ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
微信小程序之toast等弹框提示
微信小程序中toast消息提示框只有两种显示的效果,就是成功和加载,使用wx.showToast(OBJECT). 看下有关参数说明: 代码很简单: wx.showToast({title: '成功' ...
微信小程序-006-投票功能-搜索投票
微信小程序-006-投票功能-搜索投票-2020-8-16 目录一.wxml 二.js pages/tools/vote/searchact/searchact 一.wxml <!--page ...
【微信小程序封装底部弹出框二】
[微信小程序封装底部弹出框二]  <view><button style="margin-top: 300px;" ...
微信小程序之select下拉框
wxml: <view class="classify-kuangjia"><view class="classify-kuangjia2"& ...
微信小程序入门七登录注册
上一章介绍了微信小程序入门六本地缓存和搜索 ,这章介绍小程序的登录注册页面.主要有表单的验证,错误信息的提示,form表单的取值,get / post 请求 ,反馈交互提示框,页面跳转以及页面U ...

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

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

搜索框的组成

定义布局容器

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

具体实现步骤

框架实现

样式实现

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

最新文章

热门文章