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.pswp.cn/news/211030.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/211030.shtml
英文地址,請注明出處:http://en.pswp.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…

前端知識筆記(三十六)———HTTP 緩存機制

一、強制緩存 只要瀏覽器判斷緩存沒有過期&#xff0c;則直接使用瀏覽器的本地緩存而無需再請求服務器。 強制緩存是利用下面這兩個 HTTP 響應頭部&#xff08;Response Header&#xff09;字段實現的&#xff0c;它們都用來表示資源在客戶端緩存的有效期&#xff1a; Cache-…

java中對象和Map互相轉換的幾種方式

在Java中&#xff0c;將對象和Map相互轉換是常見的操作&#xff0c;可以通過不同的方式實現這種轉換。以下是幾種常見的方法以及示例說明&#xff1a; 1. 使用Hutool工具類 Hutool是一個優秀的Java工具包&#xff0c;提供了豐富的工具方法&#xff0c;其中就包括對象和Map之間…

【基于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…

redis過期提醒

redis過期提醒 有一次看redis的配置文件發現一個notify-keyspace-events配置&#xff0c;注釋里邊長篇大論的&#xff0c;那我得看看這是干啥的&#xff0c;看完注釋內容&#xff0c;發現不得了了&#xff0c;redis竟然還有過期提醒的功能 接下來得大家解釋一下&#xff1a; 首…

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…

F : A DS二分查找_尋找比目標字母大的最小字母

Description 給你一個字符串str&#xff0c;字符串中的字母都已按照升序排序&#xff0c;且只包含小寫字母。另外給出一個目標字母target&#xff0c;請你尋找在這一有序字符串里比目標字母大的最小字母。 在比較時&#xff0c;字母是依序循環出現的。例如&#xff0c;str“ab…

Python中鎖的常見用法

在 Python 中&#xff0c;可以使用線程鎖來控制多個線程對共享資源的訪問。以下是一些常見的 Python 中鎖的用法&#xff1a; 創建線程鎖 在 Python 中&#xff0c;可以使用 threading 模塊中的 Lock 類來創建線程鎖。例如&#xff1a; import threading# 創建線程鎖 lock …

Python網絡爬蟲環境的安裝指南

網絡爬蟲是一種自動化的網頁數據抓取技術&#xff0c;廣泛用于數據挖掘、信息搜集和互聯網研究等領域。Python作為一種強大的編程語言&#xff0c;擁有豐富的庫支持網絡爬蟲的開發。本文將為你詳細介紹如何在你的計算機上安裝Python網絡爬蟲環境。 一、安裝python開發環境 進…