微信小程序之搜索框样式(带源码)

一、效果图:

点击搜索框,“请输入搜索内容消失”,可输入关键字

二、代码:

2.1、WXML代码:

<!--搜索框部分--><view class="search"><view class="search-btn">🔍</view><input type="text" placeholder="请输入搜索内容" bindinput="onSearchInput" value="{{search}}" /><view class="search_btn"   bindtap="onSearch">搜索</view></view>

2.2、WXSS代码:

/* 搜索框*/.search {display: flex;align-items: center;height: 90rpx;width: 720rpx;justify-content: space-between;padding: 0 20rpx;margin-top: 20rpx;margin-bottom: 20rpx;box-sizing: border-box;background-color: blue;opacity: 0.8;border-radius: 40rpx;
}.search input {width: 480rpx;
}.search .search_btn {height: 55rpx;width: 110rpx;border-radius: 55rpx;background-color: blue;color: #ffffff;text-align: center;line-height: 55rpx;cursor: pointer;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/8229.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Fatal error: invalid -march= option: `armv7-a‘

我也是不知所措。 解决办法 参考&#xff1a; 嵌入式交叉编译&#xff1a;libvpx&#xff08;全网首发&#xff09;-CSDN博客

数据库复习2

试述SQL的特点 有两个关系 S(A,B,C, D)和 T(C,D,E,F)&#xff0c;写出与下列查询等价的 SQL 表达式: 用SQL语句建立第2章习题6中的4个表&#xff1b;针对建立的4个表用SQL完成第2章习题6中的查询 针对习题4中的4个表试用SQL完成以下各项操作 (1)找出所有供应商的姓名和所在城市…

[图解]SysML和EA建模住宅安全系统-02

1 00:00:00,900 --> 00:00:02,690 这个就是一个块定义图了 2 00:00:03,790 --> 00:00:04,780 简称BDD 3 00:00:05,610 --> 00:00:08,070 实际上就是UML里面的类图 4 00:00:08,080 --> 00:00:09,950 和组件图的一个结合体 5 00:00:13,150 --> 00:00:14,690 我…

WDW-10B微机控制电子万能试验机技术方案

一&#xff0e;设备外观照片&#xff1a; 项目简介&#xff1a; 微机控制电子式万能试验机是专门针对高等院校、各种金属、非金属科研厂家及国家级质检单位而设计的高端微机控制电子式万能试验机、计算机系统通过全数字控制器&#xff0c;经调速系统控制伺服电机转动&#xff…

【FFmpeg】调用ffmpeg进行H264软解

调用FFmpeg库实现264软件解码 1. FFmpeg的编译2. 调用FFmpeg实现H264软解2.1 基本框架2.2 代码实现2.3 测试结果 3. 分析工具3.1 码流分析3.2 YUV分析 调用FFmpeg库实现264软件编码可参考http://t.csdnimg.cn/FfBOY 1. FFmpeg的编译 FFmpeg在Windows下的编译参考&#xff1a;h…

MT3033 新的表达式

代码&#xff1a; #include <bits/stdc.h> using namespace std; bool is_op(char c) {return c & || c |; } int priority(char op) { // 运算优先级。如果有-*/等别的运算符&#xff0c;则这个函数很有必要if (op & || op |){return 1;}return -1; } voi…

.gitignore 文件的说明文档

今天有同事问我这个问题&#xff0c;我寻思着网上有很多资料可以查看了&#xff0c;写的也都非常好。 她说就得看我写的&#xff0c;做一个简单记录&#xff1a; .gitignore 文件用于在 Git 版本控制系统中指定不需要跟踪的文件和目录 1、确定要忽略的文件和目录&#xff1a;…

数据链路层(详细版)【01】

数据链路层是在物理层和网络层之间的协议&#xff0c;提供相邻节点的可靠数据传输 一、从体系结构来看数据链路层 数据链路层是为上下两层提供服务或者上下两层向他传送数据&#xff08;服务【垂直】&#xff09;&#xff1b;与其对等层之间用帧进行通信&#xff08;协议【水平…

2024年51cto下载的视频怎么导出

如果你喜欢在51cto上观看各种专业技术视频&#xff0c;那么你可能想将喜欢的视频保存到本地设备中&#xff0c;以便随时随地观看。今天&#xff0c;我们就来探讨一下如何在2024年将51cto下载的视频导出到你的设备中 下载51cto的工具我已经打包好了&#xff0c;有需要的自己下载…

重学java 31.API 2.StringBuilder

总有一天&#xff0c;我不再畏惧任何人的离开 —— 24.5.8 StringBuilder的介绍 1.概述 一个可变的字符序列,此类提供了一个与StringBuffer兼容的一套API&#xff0c;但是不保证同步&#xff08;线程不安全&#xff0c;效率高&#xff…

Qt 6.7 正式发布!

本文翻译自&#xff1a;Qt 6.7 Released! 原文作者&#xff1a;Qt Group研发总监Volker Hilsheimer 在最新发布的Qt 6.7版本中&#xff0c;我们大大小小作出了许多改善&#xff0c;以便您在构建现代应用程序和用户体验时能够享受更多乐趣。 部分新增功能已推出了技术预览版&a…

scikit-learn多因子线性回归预测房价

1.首先是单因子线性回归预测房价 import numpy as np import pandas as pd from matplotlib import pyplot as plt from sklearn.linear_model import LinearRegression from sklearn.metrics import mean_squared_error, r2_score# 1.读取csa房屋数据 path D:/pythonDATA/us…

地道俄语口语,柯桥俄语培训哪家好

1、по-моему 依我看&#xff1b;在我看来 例&#xff1a; По-моему, сегодня будет дождь. 依我看, 今天要下雨。 Сделай по-моему. 按我的办法干吧 2、кажется 似乎是&#xff1b;看起来 例&#xff1a; Парень, …

mvc区域、Html.RenderAction、Html.RenderPartial、 模板、section

根据上图 Html.RenderPartial 与 Html.RenderAction 区别 RenderAction 会把对应的视图结果渲染 RenderPartial 会把html视图直接渲染 模板

mysql binlog 如何区分db

binlog不是InnoDB存储引擎特有的日志文件&#xff0c;是属于mysql server自己的日志文件。 提交事务的时候&#xff0c;同时会写入binlog 在MySQL中&#xff0c;Binary Log&#xff08;binlog&#xff09;记录了数据库更改操作的所有细节&#xff0c;对于实现数据复制、恢复以…

java 语言写一个装饰器模式代码

装饰器模式&#xff08;Decorator Pattern&#xff09;允许你动态地给一个对象添加一些额外的职责。就增加功能来说&#xff0c;装饰器模式相比生成子类更为灵活。下面是一个简单的 Java 装饰器模式的示例代码&#xff1a; 首先&#xff0c;我们定义一个接口 Component&#x…

The 2021 Sichuan Provincial Collegiate Programming Contest

The 2021 Sichuan Provincial Collegiate Programming Contest The 2021 Sichuan Provincial Collegiate Programming Contest A. Chuanpai 题意&#xff1a;给出总值k&#xff0c;将k分成xyk&#xff0c;x和y均小于7&#xff0c;最多分成多少组。 思路&#xff1a;暴力跑一…

【工具】Office/WPS 插件|AI 赋能自动化生成 PPT 插件测评 —— 必优科技 ChatPPT

本文参加百度的有奖征文活动&#xff0c;更主要的也是借此机会去体验一下 AI 生成 PPT 的产品的现状&#xff0c;因此本文是设身处地从用户的角度去体验、使用这个产品&#xff0c;并反馈最真实的建议和意见&#xff0c;除了明确该产品的优点之外&#xff0c;也发现了不少缺陷和…

实战Java虚拟机-基础篇

JVM的组成 一、自动垃圾回收 1.Java的内存管理 Java中为了简化对象的释放&#xff0c;引入了自动的垃圾回收&#xff08;Garbage Collection简称GC&#xff09;机制。通过垃圾回收器来对不再使用的对象完成自动的回收&#xff0c;垃圾回收器主要负责对堆上的内存进行回收。其…

vue项目基于WebRTC实现一对一音视频通话

效果 前端代码 <template><div class"flex items-center flex-col text-center p-12 h-screen"><div class"relative h-full mb-4 fBox"><video id"localVideo"></video><video id"remoteVideo">…