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

一、效果图:

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

二、代码:

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,一经查实,立即删除!

相关文章

数据库复习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…

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…

数据链路层(详细版)【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视图直接渲染 模板

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">…

【MQTT】服务端、客户端工具使用记录

目录 一、服务端 1.1 下载 1.2 相关命令 &#xff08;1&#xff09;启动 &#xff08;2&#xff09;关闭 &#xff08;3&#xff09;修改用户名和密码 1.3 后台管理 &#xff08;1&#xff09;MQTT配置 &#xff08;2&#xff09;集群概览 &#xff08;3&#xff09;…

如何使用SkyWalking收集分析分布式系统的追踪数据

Apache SkyWalking 是一个开源的观测性工具&#xff0c;用于收集、分析和展示分布式系统的追踪数据。SkyWalking 支持多种语言的追踪&#xff0c;包括但不限于 Java、.NET、Node.js 等。以下是使用 SkyWalking 工具实现数据采集的详细步骤&#xff1a; 1. 下载和安装 SkyWalkin…

数据挖掘算法原理与实践:决策树

第2关&#xff1a;决策树算法原理 任务描述 本关任务&#xff1a;根据本关所学知识&#xff0c;完成 calcInfoGain 函数。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 信息熵&#xff1b;条件熵&#xff1b;信息增益。 信息熵 信息是个很抽象的概念。…

风电厂数字孪生3D数据可视化交互展示构筑智慧化电厂管理体系

随着智慧电厂成为未来电力企业发展的必然趋势&#xff0c;深圳华锐视点紧跟时代步伐&#xff0c;引领技术革新&#xff0c;推出了能源3D可视化智慧管理系统。该系统以企业现有的数字化、信息化建设为基础&#xff0c;融合云平台、大数据、物联网、移动互联、机器人、VR虚拟现实…

Android 右键 new AIDL 无法选择

提示 (AIDL File)Requires setting the buildFeatures.aidl to true in the build file&#xff09; 解决方式&#xff1a; 在app的build.gradl中 adnroid{} 添加&#xff1a; buildFeatures{aidl true}