uniapp如何制作一个收缩通讯录(布局篇)

html:

<view class="search">
			<view class="search_padding">
				<u-search @change="search" placeholder="请输入成员名称" v-model="keyword"></u-search>
			</view>
		</view>
<view class="" style="background-color: #ffffff;">
			<u-collapse>
				<u-collapse-item :open="item.open" @change="clicks(e)" :title="item.type_title"
					v-for="(item, index) in itemList" v-if="item.data.length != 0" :key="index">
					<view class="list" :style="items.status ? 'background-color: #F4F4F4;':''"
						v-for="(items,indexs) in item.data" :key="indexs" @click="click(index,indexs)">
						<image :src="items.img" mode="">
						</image>
						<view class="" style="line-height: 60rpx;text-align: start;width: 80%;">
							<p>{{items.note}}</p>
							<p>{{items.tel}}</p>
						</view>
						<u-checkbox-group>
							<u-checkbox :checked="items.status"></u-checkbox>
						</u-checkbox-group>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>

js:

itemList: [],

css:

.search {
		width: 100%;
		background-color: #ffffff;
	}

	.search_padding {
		width: 94%;
		margin-left: 3%;
		padding: 10px 0px;
	}

	.u-search__action {
		display: none !important;
	}
.list {
		width: 92%;
		display: flex;
		align-items: center;
		border: 1px solid #f4f4f4;
		padding: 8px 15px;
		justify-content: space-between;
	}

	.list image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10px;
		margin-right: 20rpx;
	}

	.u-collapse-item__content__text {
		padding: 0 !important;
	}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【面试经典150 | 二叉树】从中序与后序遍历序列构造二叉树

文章目录 写在前面Tag题目来源题目解读解题思路方法一&#xff1a;递归 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对于本题涉及到的数据结构等内容…

2020年第九届数学建模国际赛小美赛A题自由泳解题全过程文档及程序

2020年第九届数学建模国际赛小美赛 A题 自由泳 原题再现&#xff1a; 在所有常见的游泳泳姿中&#xff0c;哪一种最快&#xff1f;哪个冲程推力最大&#xff1f;在自由泳项目中&#xff0c;游泳者可以选择他们的泳姿&#xff0c;他们通常选择前面的爬行。然而&#xff0c;游泳…

中文分词演进(查词典,hmm标注,无监督统计)新词发现

查词典和字标注 目前中文分词主要有两种思路&#xff1a;查词典和字标注。 首先&#xff0c;查词典的方法有&#xff1a;机械的最大匹配法、最少词数法&#xff0c;以及基于有向无环图的最大概率组合&#xff0c;还有基于语言模型的最大概率组合&#xff0c;等等。 查词典的方法…

esxi全称“VMware ESXi

esxi全称“VMware ESXi”&#xff0c;是可直接安装在物理服务器上的强大的裸机管理系统&#xff0c;是一款虚拟软件&#xff1b;ESXi本身可以看做一个操作系统&#xff0c;采用Linux内核&#xff0c;安装方式为裸金属方式&#xff0c;可直接安装在物理服务器上&#xff0c;不需…

TCP传输数据的确认机制

实际的TCP收发数据的过程是双向的。 TCP采用这样的方式确认对方是否收到了数据&#xff0c;在得到对方确认之前&#xff0c;发送过的包都会保存在发送缓冲区中。如果对方没有返回某些包对应的ACK号&#xff0c;那么就重新发送这些包。 这一机制非常强大。通过这一机制&#xf…

Redis如何做内存优化?

Redis如何做内存优化&#xff1f; 1、缩短键值的长度 缩短值的长度才是关键&#xff0c;如果值是一个大的业务对象&#xff0c;可以将对象序列化成二进制数组&#xff1b; 首先应该在业务上进行精简&#xff0c;去掉不必要的属性&#xff0c;避免存储一些没用的数据&#xff1…

博途PLC SCL间接寻址编程应用

这篇博客里我们将要学习Pointer和Any指针&#xff0c;PEEK和POKE指令&#xff0c;当然我们还可以数组类型数据实现数组指针寻址&#xff0c;具体应用介绍请参考下面文章链接&#xff1a; https://rxxw-control.blog.csdn.net/article/details/134761364https://rxxw-control.b…

15.Java程序设计-基于SSM框架的微信小程序校园求职系统的设计与实现

摘要&#xff1a; 本研究旨在设计并实现一款基于SSM框架的微信小程序校园求职系统&#xff0c;以提升校园求职流程的效率和便捷性。通过整合微信小程序平台和SSM框架的优势&#xff0c;本系统涵盖了用户管理、职位发布与搜索、简历管理、消息通知等多个功能模块&#xff0c;为…

分子生成领域的stable diffusion - GEOLDM

一、关于stable diffusion 很多人都知道stable diffusion&#xff0c;stable diffusion的出现改变了机器生成领域&#xff0c;让AI技术第一次无比的接近正常人。大语言模型&#xff0c;AIGC概念于是兴起。基于stable diffusion 大家开发了lora&#xff0c; hyperwork等微调技术…

【VS Code】Visual Studio Code 你必须安装的 Plugins - 持续更新

文章目录 GitLens — Git supercharged【真香】EditorConfig for VS Code【真香】Remote - SSH【真香】MySQL【真香】 Talk is cheap, show me the code. GitLens — Git supercharged【真香】 插件地址&#xff1a; https://marketplace.visualstudio.com/items?itemNameeam…

C语言有哪些预处理操作?

C语言的预处理是在编译之前对源代码进行处理的阶段&#xff0c;它主要由预处理器完成。预处理器是一个独立的程序&#xff0c;它负责对源代码进行一些文本替换和处理&#xff0c;生成经过预处理的代码。以下是C语言预处理的一些重要特性&#xff1a; 1&#xff0c;头文件包含 #…

侮辱性涨薪!业绩得了S,调薪涨了450

信安这个行业3年前各大媒体&#xff0c;信安自己人都觉得自己在个朝阳行业&#xff0c;红利在咋弄不得再吃5年。 现在拉个干网络安全的再去问问&#xff0c;看看谁不是去年年终奖砍了一半、或者根本就没了&#xff0c;再或者每天岌岌可危生怕去领大礼包。 原本10月份的激励性…

python变量的命名和使用

变量名只能包含字母、数字和下划线 变量名只能包含字母、数字和下划线。变量名可以字母或下划线打头&#xff0c;但不能以数字打头。例如&#xff0c;可将变量命名为message_1&#xff0c;但不能将其命名为1_message。 Python 语言中&#xff0c;以下划线开头的标识符有特殊含…

Android 相机库CameraView源码解析 (五) : 保存滤镜效果

1. 前言 这段时间&#xff0c;在使用 natario1/CameraView 来实现带滤镜的预览、拍照、录像功能。 由于CameraView封装的比较到位&#xff0c;在项目前期&#xff0c;的确为我们节省了不少时间。 但随着项目持续深入&#xff0c;对于CameraView的使用进入深水区&#xff0c;逐…

若依vue-新建目录及菜单

前面我们把标题和logo换成了自己系统的标题和logo了 接下来就是要建立自己需要的菜单和页面 新建目录解析 在拉下来的代码跑起来后 有一个系统菜单--菜单管理(如图) 在这个菜单的这个页面内有对应的操作功能 修改功能 这个功能可以修改写好了的菜单数据 例如:名称/排序/路由…

(一)五种最新算法(SWO、COA、LSO、GRO、LO)求解无人机路径规划MATLAB

一、五种算法&#xff08;SWO、COA、LSO、GRO、LO&#xff09;简介 1、蜘蛛蜂优化算法SWO 蜘蛛蜂优化算法&#xff08;Spider wasp optimizer&#xff0c;SWO&#xff09;由Mohamed Abdel-Basset等人于2023年提出&#xff0c;该算法模型雌性蜘蛛蜂的狩猎、筑巢和交配行为&…

vscode 编译运行c++ 记录

一、打开文件夹&#xff0c;新建或打开一个cpp文件 二、ctrl shift p 进入 c/c配置 进行 IntelliSense 配置。主要是选择编译器、 c标准&#xff0c; 设置头文件路径等&#xff0c;配置好后会生成 c_cpp_properties.json&#xff1b; 二、编译运行&#xff1a; 1、选中ma…

SpringBoot的依赖管理和自动配置

与其明天开始&#xff0c;不如现在行动&#xff01; 文章目录 1 依赖管理机制2 自动配置机制2.1 初步理解2.2 完整流程 &#x1f48e;总结 1 依赖管理机制 为什么导入starter-web后所有相关依赖都会导入进来&#xff1f; 开发什么场景&#xff0c;导入什么场景启动器-spring-bo…

[ROS2] --- action

1 action介绍 ROS通信机制也会被常常用到——那就是动作。从这个名字上就可以很好理解这个概念的含义&#xff0c;这种通信机制的目的就是便于对机器人某一完整行为的流程进行管理。 1.1 客户端/服务器模型 动作和服务类似&#xff0c;使用的也是客户端和服务器模型&#xf…

zabbix 进阶

zabbix的字段发现机制&#xff1a; zabbix客户端主动和服务端联系&#xff0c;将自己的地址和端口发送服务端实现字段添加监控主机。 客户端是主动一方。 缺点&#xff1a;自定义网段中主机数量太多&#xff0c;登记耗时会很久&#xff0c;而且这个自动发现机制不是很稳定。…