草庐IT

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

sbj_ssfer_noier 2023-04-15 原文

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

搜索框的组成

  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
  3. 给搜索文字设置大小和颜色；
    给搜索文本添加一个空格，来开与图片的间距。
  4. 图片和文字居中，给searchInnerView设置内容居中；
  5. 给searchInnerView设置宽、高、背景颜色、边框、圆角；
  6. 图片和文字垂直水平居中，并且对齐；
    1. 给searchInnerView里面的文字设置行高
    2. 给图片和文字分别设置垂直对齐方式
  7. 给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;
}
第七章微信小程序spanclasstoken

有关微信小程序（第七章）- 搜索框的实现的更多相关文章

  1. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  2. ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2

    我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll

  3. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  4. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  5. MIMO-OFDM无线通信技术及MATLAB实现（1）无线信道：传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO

  6. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说，前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可，但要是匹配的code码比较多或者多个页面用到时，为了便于后期维护，后台就会使用字典表让前端匹配，下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs？{{method(a,b)}}可以看到，上述代码是一个调用方法传值的操作，在vue中很常见，多用于数据之间的转换，但由于微信小程序诸多限制的原因，你并不能优雅的这样操作，可能有人会说，为什么不用if判断实现呢？但是if判断的局限性在于如果存在数据量过大时，大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  7. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  8. 微信小程序开发入门与实战（Behaviors使用） - 2

    @作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中，用于实现

  9. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作，这种方式比较简单，也比较容易理解。本文为大家介绍另一种不使用递归的方式，由于没有使用递归，只用到了循环和集合，所以效率更高一些！一、使用递归遍历文件夹整体思路1、使用File封装初始目录，2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组，取出每个File对象4-1、如果File是否是一个文件，打印4-2、否则就是一个目录，递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

  10. ruby - Arrays Sets 和 SortedSets 在 Ruby 中是如何实现的 - 2

    通常，数组被实现为内存块，集合被实现为HashMap，有序集合被实现为跳跃列表。在Ruby中也是如此吗？我正在尝试从性能和内存占用方面评估Ruby中不同容器的使用情况 最佳答案 数组是Ruby核心库的一部分。每个Ruby实现都有自己的数组实现。Ruby语言规范只规定了Ruby数组的行为，并没有规定任何特定的实现策略。它甚至没有指定任何会强制或至少建议特定实现策略的性能约束。然而，大多数Rubyist对数组的性能特征有一些期望，这会迫使不符合它们的实现变得默默无闻，因为实际上没有人会使用它:插入、前置或追加以及删除元素的最坏情况步骤复

随机推荐