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

news/2024/5/20 18:30:06

一、效果图:

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

二、代码:

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.mrgr.cn/p/64072176

相关文章

数据库加密数据模糊匹配查询技术方案

文章目录 前言沙雕方案内存加载解密密文映射表 常规做法实现数据库加密算法参考 分词组合加密&#xff08;推荐&#xff09; 超神方案总结个人简介 前言 在数据安全性和查询效率之间找到平衡是许多数据管理系统所面临的挑战之一。特别是在涉及加密数据的情况下&#xff0c;如何…

IP协议,网络层

一、IP协议报文 在网络层最主要的协议是IP协议&#xff0c;网络层的主要任务是进行&#xff1a;1.地址管理 2.路由选择 地址管理&#xff1a;使用一套地址体系&#xff0c;描述互联网中每个设备所处的位置。 IP地址有两个版本&#xff0c;1.IPV4 2.IPV6 &#xff0c;IP…

uiautomator2使用方法

一.设备连接 1.usb单设备连接d = u2.connect()2.usb多设备连接d = u2.connect("90bf8faf") # 多台设备填写device即可3.wifi连接d = u2.connect("ip:proxy") # wifi连接设备adb使用wifi连接设备:https://www.cnblogs.com/lihongtaoya/p/17553171.html 二…

W801学习笔记二十:宋词学习应用

前三章完成了唐诗的应用&#xff0c;本章将实现宋词的学习应用。 宋词与唐诗的区别不大&#xff0c;马上开始。 1、我们需要参考前面唐诗的方式&#xff0c;把宋词文本下载下来&#xff0c;并进行格式整理。 W801学习笔记十七&#xff1a;古诗学习应用——上 2、在菜单中添加…

查看、删除数据库

#删除和查询数据库 #查看当前数据库服务器中的所有数据库 show databases #查看hsp_db01数据库的定义信息 show create database `hsp_db01` #在创建数据库,表的时候为了规避关键字,可以用``反引号解决 #删除数据库hsp_db01 drop database hsp_db01

element-ui使用el-date-picker日期组件常见场景

开始 最近一直在使用 element-ui中的日期组件。 所以想对日期组件常用的做一个简单的总结; 1.处理日期组件选择的时候面板联动问题 2.限制时间范围解除两个日期面板之间的联动 我们发现2个日期面板之间其实是有联动关系的; 开始时间面板和结束时间面板始终只能相邻; 不能出…

[鸟哥私房菜]4.首次登录与在线求助

第4章 首次登录与在线求助 4.1.3 X Window 与命令行模式的切换 通常我们称命令行界面为终端界面、Terminal 或 Console。Linux 默认的情况下会提供六个终端(Terminal)来让用户登录, 切换的方式为使用:[Ctrl] + [Alt] + [F1]~[F6] 的组合按钮。其中 [Ctrl] + [Alt] + [F1] 为…

vue3项目引入VueQuill富文本编辑器(成功)及 quill-image-uploader 图像模块(未成功)

tip&#xff1a;重点解释都写在代码注释里了&#xff0c;方便理解&#xff0c;所以看起来比较密集 富文本基本使用 项目文件夹路径安装依赖 npm install vueup/vue-quilllatest --save 全局注册&#xff1a;main.js // main.js// 自己项目的一些配置&#xff08;只放了主要…

vue+ant-design+formBuiler表单构建器——技能提升——form design——亲测有效

最近看到后端同事在弄一个后台管理系统&#xff0c;额&#xff0c;前端真的是夹缝中生存啊&#xff0c;AI抢饭碗&#xff0c;后端也想干前端的活儿。。。 他用到了表单构建器&#xff0c;具体效果如下: 网上有很多适用于ElementUi和ant-design的form design插件&#xff0c;下…

wePWNise:一款功能强大的红队Office宏VBA代码生成工具

关于wePWNise wePWNise是一款功能强大的Office宏VBA代码生成工具&#xff0c;该工具基于纯Python开发&#xff0c;可以帮助广大研究人员生成用于Office宏或模版的VBA代码&#xff0c;并以此来测试目标Office环境、应用程序控制和防护机制的安全性。 wePWNise的设计理念将自动化…

20211317李卓桐 Exp6 MSF攻防实践 实验报告

Exp6 MSF攻防实践 实践内容本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路。具体需要完成: 1.1一个主动攻击实践,尽量使用最新的类似漏洞; 1.2 一个针对浏览器的攻击,尽量使用最新的类似漏洞; 1.3 一个针对客户端的攻击,如Adobe或office,尽量使…

深入理解Django:中间件与信号处理的艺术

title: 深入理解Django:中间件与信号处理的艺术 date: 2024/5/9 18:41:21 updated: 2024/5/9 18:41:21 categories:后端开发tags:Django 中间件 信号 异步 性能 缓存 多语言引言 在当今的Web开发领域,Django以其强大的功能、简洁的代码结构和高度的可扩展性,已成为众多开发者…

JAVA链表相关习题2

1.反转一个单链表。 . - 力扣&#xff08;LeetCode&#xff09; //2在1前面 //1在3前面 //ListNode curhead.next //head.nextnull(翻转后头节点变为最后一个节点) // while(cur ! null) { //记录 当前需要翻转节点的下一个节点 ListNode curNext cu…

零知识证明: Tornado Cash 项目学习

前言 最近在了解零知识证明方面的内容,这方面的内容确实不好入门也不好掌握,在了解了一些基础的概念以后,决定选择一个应用了零知识证明的项目来进行进一步的学习。最终选择了 Tornado Cash 这个项目,因为它著名且精致,适合入门的同学进行学习。 学习 Tornado Cash 项目,…

高并发秒杀项目随手笔记

1 数据库基字符集为什么选择utf8mb4? 2 在 MyBatis 中,JavaBean 属性名和数据库字段名的映射非常关键,正确设置这一映射是保证数据正确封装到 JavaBean 中的前提。以下是 MyBatis 映射机制的详细解释: 1. 默认映射行为 如果在 MyBatis 的 <resultMap> 中没有明确指定…

创建数据库

#数据库的操作 #删除数据库指令 DROP DATABASE hsp_db01;#hsp_db01这个对应的是数据 #用指令创建数据库 CREATE DATABASE hsp_db01; #创建一个使用utf8字符集的hsp_db02数据库 CREATE DATABASE hsp_db02 CHARACTER SET utf8 #创建一个使用utf8字符集,并带校队规则的hsp_db03数…

前后端数据交互形式随手笔记

注解@RequestParam Map<String, String> params 的使用1 在Spring MVC中,使用@RequestParam Map<String, String> params可以接收前端发出的请求参数并将它们作为一个Map收集起来。这种方式非常灵活,可以处理来自前端的各种数据提交形式。以下是一些常见的前端数…

【华为】AC直连二层组网隧道转发实验配置

【华为】AC直连二层组网隧道转发实验配置 实验需求拓扑配置AC数据规划表 AC的配置顺序AC1基本配置(二层通信)AP上线VAP组关联--WLAN业务流量 LSW1AR1STA获取AP的业务流量 配置文档 实验需求 AC组网方式&#xff1a;直连二层组网。 业务数据转发方式&#xff1a;隧道转发。 DHC…

SpringBoot随手笔记

SpringBoot随手笔记 0 关于火狐浏览器什么时候会发出http请求的说明 在抓包的情况下(按下F12后的模式),不管是刷新页面还是在浏览器地址栏回车,该页面中的图片都会发出http请求; 但如果不是抓包的模式下,如果访问的页面和上一次访问的页面相同(地址栏的地址没有更改),不管是…