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

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

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

相关文章

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

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

Ansible中执行流控制

1.ansible中的迭代循环 创建目录和文件 vim createfile.yaml - name: create file playbook hosts: all tasks: - name: create file file: path: "/mnt/{{item[name]}}" state: …

Unity 自定义窗口

放在Editor文件夹下&#xff1b; #if UNITY_EDITORusing System; using UnityEditor; using UnityEngine;namespace EditorCustumTool {/// <summary>/// 自定义窗口/// </summary>public class CustomWindow : EditorWindow{public enum FlagType{Flag1 101,Fl…

【基于ESP32无线蓝牙上传电脑Excel透传数据】

【基于ESP32无线蓝牙上传电脑透传数据】 1. 引言2. 环境搭建2.1 硬件准备:2.2 软件准备:2.3. 配置Excel端口接收功能3. 测试代码4. 连接电脑和 ESP324.1 烧录程序4.2 启动蓝牙服务4.3 测试数据透传5. 总结1. 引言 随着物联网技术的发展,越来越多的设备开始支持无线通信,其…

fl studio2024官方体验版如何破解?

fl studio2024全称Fruity Loops Studio2024&#xff0c;这款软件也被人们亲切的称之为水果&#xff0c;它是一款功能强大的音乐创作编辑软件&#xff0c;拥有全功能的录音室&#xff0c;大混音盘以及先进的音乐制作工具&#xff0c;用户通过使用该软件&#xff0c;就可以轻松制…

轻量封装WebGPU渲染系统示例<43>- 材质组装流水线(MaterialPipeline)之灯光和阴影(源码)

目标: 数据化&#xff0c;模块化&#xff0c;自动化 备注: 从这个节点开始整体设计往系统规范的方向靠拢。之前的都算作是若干准备。所以会和之前的版本实现有些差异。 当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/feature/material/src/voxgpu/sa…

EfficientNet: Rethinking Model Scaling for Convolutional Neural Networks(2020)

文章目录 -Abstract1. Introductiondiss former methodour method 2. Related Work3. Compound Model Scaling3.1. 问题公式化3.2. Scaling Dimensions3.3. Compound Scaling 4. EfficientNet Architecture5. Experiments6. Discussion7. Conclusion 原文链接 源代码 - 本文中…

LeNet

概念 代码 model import torch.nn as nn import torch.nn.functional as Fclass LeNet(nn.Module):def __init__(self):super(LeNet, self).__init__() # super()继承父类的构造函数self.conv1 nn.Conv2d(3, 16, 5)self.pool1 nn.MaxPool2d(2, 2)self.conv2 nn.Conv2d(16…

Bash脚本处理ogg、flac格式到mp3格式的批量转换

现在下载的许多音乐文件是flac和ogg格式的&#xff0c;QQ音乐上下载的就是这样的&#xff0c;这些文件尺寸比较大&#xff0c;在某些场合使用不便&#xff0c;比如在车机上播放还是mp3格式合适&#xff0c;音质这些在车机上播放足够了&#xff0c;要求不高。比如本人就喜欢下载…

软件接口安全设计规范

《软件项目接口安全设计规范》 1.token授权机制 2.https传输加密 3.接口调用防滥用 4.日志审计里监控 5.开发测试环境隔离&#xff0c;脱敏处理 6.数据库运维监控审计

卷王开启验证码后无法登陆问题解决

问题描述 使用 docker 部署&#xff0c;后台设置开启验证&#xff0c;重启服务器之后&#xff0c;docker重启&#xff0c;再次访问系统&#xff0c;验证码获取失败&#xff0c;导致无法进行验证&#xff0c;也就无法登陆系统。 如果不了解卷王的&#xff0c;可以去官网看下。…

飞天使-linux操作的一些技巧与知识点3

http工作原理 http1.0 协议 使用的是短连接&#xff0c;建立一次tcp连接&#xff0c;发起一次http的请求&#xff0c;结束&#xff0c;tcp断开 http1.1 协议使用的是长连接&#xff0c;建立一次tcp的连接&#xff0c;发起多次http的请求&#xff0c;结束&#xff0c;tcp断开ngi…

ky10 server x86 设置网卡开机自启

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

Aloha 机械臂的学习记录2——AWE:AWE + ACT

继续下一个阶段&#xff1a; Train policy python act/imitate_episodes.py \ --task_name [TASK] \ --ckpt_dir data/outputs/act_ckpt/[TASK]_waypoint \ --policy_class ACT --kl_weight 10 --chunk_size 50 --hidden_dim 512 --batch_size 8 --dim_feedforward 3200 \ --n…

Python网络爬虫环境的安装指南

网络爬虫是一种自动化的网页数据抓取技术&#xff0c;广泛用于数据挖掘、信息搜集和互联网研究等领域。Python作为一种强大的编程语言&#xff0c;拥有丰富的库支持网络爬虫的开发。本文将为你详细介绍如何在你的计算机上安装Python网络爬虫环境。 一、安装python开发环境 进…

bc-linux-欧拉重制root密码

最近需要重新安装虚拟机的系统 安装之后发现对方提供的root密码不对&#xff0c;无法进入系统。 上网搜了下发现可以进入单用户模式进行密码修改从而重置root用户密码。 在这个界面下按e键 找到图中部分&#xff0c;把标红的部分删除掉&#xff0c;然后写上rw init/bin/…

24、文件上传漏洞——Apache文件解析漏洞

文章目录 一、环境简介一、Apache与php三种结合方法二、Apache解析文件的方法三、Apache解析php的方法四、漏洞原理五、修复方法 一、环境简介 Apache文件解析漏洞与用户配置有密切关系。严格来说&#xff0c;属于用户配置问题&#xff0c;这里使用ubantu的docker来复现漏洞&am…

IOday7作业

1> 使用无名管道完成父子进程间的通信 #include<myhead.h>int main(int argc, const char *argv[]) {//创建存放两个文件描述符的数组int fd[2];int pid -1;//打开无名管道if(pipe(fd) -1){perror("pipe");return -1;}//创建子进程pid fork();if(pid &g…

非标设计之电磁阀

电磁阀&#xff1a; 分类&#xff1a; 动画演示两位三通电磁阀&#xff1a; 两位三通电磁阀动画演示&#xff1a; 111&#xff1a; 气缸回路的介绍&#xff1a; 失电状态&#xff1a; 电磁阀得电状态&#xff1a; 两位五通电磁阀的回路&#xff1a;&#xff08;常用&#xf…

算数运算符和算数表达式

基本算数运算符 算数运算符&#xff1a; &#xff08;加法运算符或正值运算符&#xff09;、-&#xff08;减法运算符或负值运算符&#xff09;、*&#xff08;乘&#xff09;、/&#xff08;除&#xff09;、%&#xff08;求余数&#xff09; 双目运算符&#xff1a; 双目…