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

news2024/11/17 12:42:08

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;
	}

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

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

相关文章

【win10用vim开发stm32】二、vimspector的单片机调试

▲ 我的vim配置仓库: gitee&#xff0c;vim相关优先在gitee更新&#xff0c;博客vim专栏作为部分补充和使用说明 ▲ 本文提供vimspector调试的一个示例&#xff0c;和keil的调试功能比当然还是有很大差距&#xff0c;不过简单的调试功能如单步、复位、运行这些都跑通了&#xf…

Android 分享小结

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、商业变现、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、微信 分享 三、 QQ 、QQ空间&#xff08;Qz…

vscode 编译运行c++ 记录

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

4.8 构建onnx结构模型-Less

前言 构建onnx方式通常有两种&#xff1a; 1、通过代码转换成onnx结构&#xff0c;比如pytorch —> onnx 2、通过onnx 自定义结点&#xff0c;图&#xff0c;生成onnx结构 本文主要是简单学习和使用两种不同onnx结构&#xff0c; 下面以 Less 结点进行分析 方式 方法一&a…

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

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

QT之常用按钮组件

QT之常用按钮组件 导入图标 布局 显示选中 实验结果 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }void Widget::on_push…

‘ChatGLMTokenizer‘ object has no attribute ‘tokenizer‘解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

六要素金属气象仪-科普小百科

随着科技的发展&#xff0c;气象监测设备也日新月异。今天&#xff0c;我们将为你介绍一款全新的六要素金属气象仪&#xff0c;它能够实时监测环境温度、相对湿度、风速、风向、大气压力、压电雨量等关键气象参数&#xff0c;为你的生活和工作保驾护航。 一、产品简介 WX-Y6S…

浪潮信息:数字化转型的策略与实践

在数字化浪潮的推动下&#xff0c;浪潮信息正致力于将计算创新推向新的高度。作为科技发展的排头兵&#xff0c;浪潮信息深知算力的重要性&#xff0c;因此不断探索前所未有的解决方案。在这个过程中&#xff0c;浪潮信息的研发人员和科技工作者如同探险家&#xff0c;勇敢地迎…

ky10 server x86 设置网卡开机自启

输入命令查看网卡名称 ip a 输入命令编辑网卡信息 vi /etc/sysconfig/network-scripts/*33改成yes 按ESC键&#xff0c;输入:wq&#xff0c;保存

m6A RNA甲基化MeRIP-seq测序分析实验全流程解析

甲基化RNA免疫共沉淀(MeRIP-seq/m6A-seq)实验怎么做&#xff0c;从技术原理、建库测序流程、信息分析流程和研究套路等四方面详细介绍。 一、甲基化RNA免疫共沉淀(MeRIP-seq/m6A-seq)测序技术原理 表观转录组指RNA序列不发生改变的情况下&#xff0c;由RNA上的化学修饰调节基因…

Autosar UDS-CAN诊断开发02-1(CAN诊断帧格式类型详解、CANFD诊断帧格式类型详解、15765-2(CANTP层)的意义)

目录 前言 CANTP层&#xff08;15765-2协议&#xff09;存在的意义 CANTP层&#xff08;15765-2协议&#xff09;帧类型详细解读&#xff08;普通CAN格式&#xff09; 四种诊断报文类型 单帧SingleFrame(SF) 首帧&#xff1a;FirstFrame(FF) 流控帧&#xff1a;FlowCont…

【LabVIEW学习】5.数据通信之TCP协议,控制电脑的一种方式

一。tcp连接以及写数据&#xff08;登录&#xff09; 数据通信--》协议--》TCP 1.tcp连接 创建while循环&#xff0c;中间加入事件结构&#xff0c;创建tcp连接&#xff0c;写入IP地址与端口号 2.写入tcp数据 登录服务器除了要知道IP地址以及端口以外&#xff0c;需要用户名与密…

【Deeplearning4j】小小的了解下深度学习

文章目录 1. 起因2. Deeplearning4j是什么3. 相关基本概念4. Maven依赖5. 跑起来了&#xff0c;小例子&#xff01;6. 鸢尾花分类代码 7. 波士顿房价 回归预测代码 8. 参考资料 1. 起因 其实一直对这些什么深度学习&#xff0c;神经网络很感兴趣&#xff0c;之前也尝试过可能因…

栈和队列的互相实现

用队列实现栈 OJ链接 请你仅使用两个队列实现一个后入先出&#xff08;LIFO&#xff09;的栈&#xff0c;并支持普通栈的全部四种操作&#xff08;push、top、pop 和 empty&#xff09;。 实现 MyStack 类&#xff1a; void push(int x) 将元素 x 压入栈顶。int pop() 移除并返…

Transformer 简介

Transformer 是 Google 在 2017 年底发表的论文 Attention Is All You Need 中所提出的 seq2seq 模型。Transformer 模型的核心是 Self-Attention 机制&#xff0c;能够处理输入序列中的每个元素&#xff0c;并能计算其与序列中其他元素的交互关系的方法&#xff0c;从而能够更…

【Linux】make/Makefile --- 自动化构建项目的工具

目录 一、make/Makefile的简单使用 二、Makefile 的语法规则 三、实现的原理 3.1 make/Makefile识别文件新旧 3.2 .PHONY修饰的伪目标总是被执行 3.3 make/Makefile是具有依赖性的推导能力的 四、语法技巧 五、注意事项 Linux中自动化构建项目最简单的方式&#xff1a;…

shiro Filter加载和执行 源码解析

一、背景 在使用若依框架&#xff08;前后端不分离包含shiro安全框架&#xff09;时&#xff0c;发现作者添加了验证码、登录帐号控制等自定义过滤器&#xff0c;于是对自定的过滤器加载和执行流程产生疑问。下面以验证码过滤器为例&#xff0c;对源码解析。注意类之间的继承关…

Kubernetes入门笔记 ——(3)理解pod对象

为什么需要pod 最为熟知的一句话&#xff1a;pod是k8s的最小调度单位。刚开始听到这句话时会想&#xff0c;已经有容器了&#xff0c;k8s为什么还要搞个pod出来&#xff1f;容器和pod是什么关系&#xff1f;容器的本质是进程&#xff0c;而k8s本质上类似操作系统。 熟悉Linux的…

导入PR的视频画面是黑屏的怎么办?

在现代视频编辑领域中&#xff0c;越来越多的人使用Adobe Premiere Pro来编辑和制作视频&#xff0c;但是在某些情况下&#xff0c;用户可能需要透明背景的视频进行创作&#xff0c;那么如何创作透明背景的视频呢&#xff1f; 要制作具有透明背景的视频&#xff0c;我们需要使…