uniapp组件库Card 卡片 的使用方法

目录

#平台差异说明

#基本使用

#配置卡片间距

#配置卡片左上角的缩略图

#配置卡片边框

#设置内边距

#API

#Props

#Slot

#Event


卡片组件一般用于多个列表条目,且风格统一的场景。

#平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

#基本使用

组件的头部信息可以通过参数配置,其他主体和底部的信息,需要通过slot传入。

  • title配置标题
  • sub-title配置副标题
<template><u-card :title="title" :sub-title="subTitle" :thumb="thumb"><view class="" slot="body"><view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0"><view class="u-body-item-title u-line-2">瓶身描绘的牡丹一如你初妆,冉冉檀香透过窗心事我了然,宣纸上走笔至此搁一半</view><image src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg" mode="aspectFill"></image></view><view class="u-body-item u-flex u-row-between u-p-b-0"><view class="u-body-item-title u-line-2">釉色渲染仕女图韵味被私藏,而你嫣然的一笑如含苞待放</view><image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg" mode="aspectFill"></image></view></view><view class="" slot="foot"><u-icon name="chat-fill" size="34" color="" label="30评论"></u-icon></view></u-card>
</template><script>
export default {data() {return {title: '素胚勾勒出青花,笔锋浓转淡',subTitle: '2020-05-15',thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',};}
};
</script><style scoped lang="scss">.u-card-wrap { background-color: $u-bg-color;padding: 1px;}.u-body-item {font-size: 32rpx;color: #333;padding: 20rpx 10rpx;}.u-body-item image {width: 120rpx;flex: 0 0 120rpx;height: 120rpx;border-radius: 8rpx;margin-left: 12rpx;}
</style>

#配置卡片间距

可以通过margin参数配置卡片与屏幕左右的边距,以及上下卡片之间的距离,如: 20rpx 30rpx20rpx 30rpx 30rpx 20rpx
注意:当设置full参数为true的时候,也就是卡片占据屏幕总宽度的时候,通过margin配置的左右边距会失效。

<u-card margin="30rpx"></u-card>

#配置卡片左上角的缩略图

这个缩略图是可选的,显示在卡片的左上角位置,如果配置了thumb参数(图片路径),就会显示图片。

  • thumb缩略图路径
  • thumb-width缩略图宽度,高等于宽
  • thumb-circle缩略图是否为圆形
<u-card thumb="xxx.jpg" thumb-width="60"></u-card>

#配置卡片边框

这里说的边框,有3个:

  • border配置是否显示整个卡片的外边框
  • head-border-bottom配置是否显示卡片内部头部的下边框
  • foot-border-top配置是否显示卡片内部底部的上边框
<u-card :border="false" :foot-border-top="false"></u-card>

#设置内边距

默认下,卡片内部的头部,主体,底部都有一个内边距,可以通过配置padding参数去覆盖:

<u-card padding="30"></u-card>

#API

#Props

参数说明类型默认值可选值
full卡片与屏幕两侧是否留空隙Booleanfasletrue
title头部左边的标题String--
title-color标题颜色String#303133-
title-size标题字体大小,单位rpxString | Number30-
sub-title头部右边的副标题String--
sub-title-color副标题颜色String#909399-
sub-title-size副标题字体大小String | Number26-
border是否显示边框Booleantruefalse
index用于标识点击了第几个卡片String | Number--
margin卡片与屏幕两边和上下元素的间距,需带单位,如"30rpx 20rpx",见上方说明String30rpx-
border-radius卡片整体的圆角值,单位rpxString | Number16-
head-style头部自定义样式,对象形式Object--
body-style主体自定义样式,对象形式Object--
foot-style底部自定义样式,对象形式Object--
head-border-bottom是否显示头部的下边框Booleantruefalse
foot-border-top是否显示底部的上边框Booleantruefalse
thumb缩略图路径,如设置将显示在标题的左边,不建议使用相对路径String--
thumb-width缩略图的宽度,高等于宽,单位rpxString | Number60-
thumb-circle缩略图是否为圆形Booleanfalsetrue
padding给head,body,foot部的内边距,见上方说明,单位rpxString | Number30-
show-head 1.3.5是否显示头部Booleantruefalse
show-foot 1.3.5是否显示尾部Booleantruefalse
box-shadow 1.6.2卡片外围阴影,字符串形式Stringnone-

#Slot

名称说明
head自定义卡片头部内容
body自定义卡片主体部分内容
foot自定义卡片底部部分内容

#Event

事件名说明回调参数
click整个卡片任意位置被点击时触发index: 用户传递的标识符
head-click卡片头部被点击时触发index: 用户传递的标识符
body-click卡片主体部分被点击时触发index: 用户传递的标识符
foot-click卡片底部部分被点击时触发index: 用户传递的标识符

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

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

相关文章

基于STM32的以太网通信协议选择与实现

在基于STM32的以太网通信中&#xff0c;主要涉及到选择合适的通信协议和实现对应的功能代码。常见的通信协议包括TCP/IP、UDP、HTTP等&#xff0c;选择合适的协议取决于具体应用需求。以下将介绍在STM32上进行以太网通信时&#xff0c;常用的通信协议选择以及对应功能代码的实现…

CSDN·COC城市开发者组织2023年度聚会上海站纪实

目录 前言活动宣传活动议程活动总结结束语 前言 2023年是CSDNCOC成立之年&#xff0c;经过一年的不断发展和壮大&#xff0c;COC上海城市开发者社区的队伍不断壮大&#xff0c;本着每个月都有线下活动的原则&#xff0c;先后举办大大小小的线下沙龙活动20余场。与此同时&…

洛谷p1157组合的输出

组合的输出 题目描述 排列与组合是常用的数学方法&#xff0c;其中组合就是从 n n n 个元素中抽出 r r r 个元素&#xff08;不分顺序且 r ≤ n r \le n r≤n&#xff09;&#xff0c;我们可以简单地将 n n n 个元素理解为自然数 1 , 2 , … , n 1,2,\dots,n 1,2,…,n&a…

NRZ Modulation

NRZ Modulation 正文简介NRZ 的优势 正文 简介 全称不归零 non-return to zero(NRZ) 调制。代表了使用两个信号等级的一种逻辑信号。一个等级为 1&#xff0c;一个等级为 0。负电压对应逻辑电路中的 0&#xff0c;正电压对应逻辑电路中的 1。对于 NRZ 传输&#xff0c;波特率…

trucksim三车队列仿真 matlab一直闪退问题

Trucksim2019 matlab版本2023a 基本框架应该都清楚 下图是主界面 overlay videos and polots with other runs 模块是 关联另一个车辆模型 核心是下图标红是核心 Number of vehicle codes 选择ALL 不要选

如何解决云计算中的性能和延迟问题?

随着云计算的普及&#xff0c;越来越多的企业开始将业务迁移到云端。然而&#xff0c;随着业务的发展和数据量的增长&#xff0c;云计算中的性能和延迟问题也逐渐凸显出来。这些问题不仅会影响用户体验&#xff0c;还会对企业的业务发展造成负面影响。因此&#xff0c;如何解决…

第1章 领域驱动设计的背景和来源

第1章 领域驱动设计的背景和来源 1-1 DDD课程导学1-2 DDD的核心思想和解决的痛点问题1-3 面向对象和敏捷与DDD的区别与联系1-4 DDD的过去、现在与未来 1-1 DDD课程导学 所以大家好&#xff0c;我是尤达&#xff0c;欢迎来到我们深入领域驱动设计。 这门课程。 从我们的副标题结…

世微AP5151芯片低压差 线性降压 恒流驱动IC 台灯 指示灯 矿灯

概述 AP5151 是一种低压差、线性降压、 固定输出电流的 LED 恒流驱动器。 除 LED 外&#xff0c;AP5151 无需外接其它元 器件即可构成一个恒流输出的 LED 驱动 电路。 AP5151 内置过热保护功能&#xff0c;可有效 保护芯片&#xff0c;避免结温超过 120oC 时因过热 而造成损坏…

java后端远程调用文件上传接口(multipart/form-data类型)的方法

multipart/form-data是一种用作传输多个文件/表单项的数据格式。 一、http请求配置 /*** HttpClientConfig http请求配置*/ public class HttpClientConfig {/*** 连接时间 ms*/protected int CONNECT_TIMING_OUT 300000;/*** 请求响应时间 ms*/protected int RESPONSE_TIMI…

【图形学】双三次贝塞尔曲线绘制方法

双三次贝塞尔曲线的定义 双三次贝塞尔曲面是由16个控制点定义的曲面&#xff0c;通常表示为4x4矩阵。 曲面的公式如下&#xff1a; p ( u , v ) ∑ i 0 3 ∑ j 0 3 P i , j B i , 3 ( u ) B j , 3 ( v ) , ( u , v ) ∈ [ 0 , 1 ] [ 0 , 1 ] p(u,v)\sum_{i0}^3\sum_{j0}…

【程序员英语】【美语从头学】初级篇(入门)(笔记)Lesson10(电话会话Ⅱ)

《美语从头学初级入门篇》 注意&#xff1a;被 删除线 划掉的不一定不正确&#xff0c;只是不是标准答案。 文章目录 Lesson 10 Telephone Conversation Ⅱ 电话会话&#xff08;二&#xff09;会话A会话B笔记I would like to do&#xff08;Id like to to do&#xff09;我想…

如何从视频号中提取视频的文案?抖音文案也可提取

最近不少小伙伴刷抖音看看视频一个一个的进行抄&#xff0c;太慢了。​今天分享一个工具搞定怎么提取视频文案的方法&#xff01; 提取文案小助手 提取文案小助手是专注视频创作者的利器&#xff0c;帮助用户一键提取视频号中的文案&#xff0c;获取的方式比较简单&#xff0c…

知过去,预未来,相信AI计算的力量

过去几十年来&#xff0c;人工智能&#xff08;AI&#xff09;领域取得了巨大的进展&#xff0c;从最初的概念逐渐演变为影响各个行业的核心技术。回顾过去&#xff0c;我们可以看到AI计算在推动科技创新和社会变革方面的无可比拟的力量。而更为令人振奋的是&#xff0c;这种力…

Sui TVL跻身全链前十名|全面详解Sui原生功能如何促使DeFi蓬勃发展

根据DefiLlama数据显示&#xff0c;1月28日Sui TVL超过4.02亿美元&#xff0c;跻身所有区块链TVL前十名&#xff01; Sui的创新应用原生功能为DeFi应用铺平了道路&#xff0c;为用户提供了良好的体验。每个原生功能&#xff0c;从促进高效的共享流动性到简化用户互动&#xff0…

js中contextmenu、click和mousedown的区别在哪?

contextmenu、click和mousedown的定义 contextmenu&#xff1a;在鼠标右键点击时触发。可以在此事件中执行特定的操作&#xff0c;比如显示自定义的右键菜单或者阻止浏览器默认的上下文菜单弹窗。它是为了满足特定场景下对右键点击的定制化处理需求。 click事件是通用的鼠标点…

印章制作办法

印章制作办法&#xff1a; 最近在做单位技术支持的培训&#xff0c;需要增加个培训章&#xff0c;自己内容完成即可。 一、excel表格中 &#xff0c;插入-形状-圆&#xff08;按住shift按键&#xff09; 操作三步&#xff1a; 1.填充 无 &#xff1a; 2.形状轮廓 ---“红色…

Linux之常见的管理命令

目录 1. whoami 2. hostname 3. uname 4. date 5. alias 6. history 7. sudo 8. systemctl 9. ps 1. whoami 作用&#xff1a; 显示出当前有效的用户名称语法&#xff1a;whoami(选项)选项&#xff1a; --help&#xff1a;在线帮助--version&#xff1a;显示版本信息…

CF1920F1 Smooth Sailing (Easy Version) 题解

魔幻暴力题。 题意简述 给你一张 n m n\times m nm 的地图&#xff0c;每个点是海 .&#xff0c;岛屿 # 或者火山 v。保证岛屿和非岛屿均可以形成恰好一个四连通块且岛屿不与地图边界接壤&#xff0c;至少有一个岛屿点与一个火山点。 定义一条合法的路径为&#xff0c;从一…

代码随想录算法训练营day15|104.二叉树的最大深度、111.二叉树的最小深度、222.完全二叉树的节点个数

104.二叉树的最大深度 559.n叉树的最大深度 111.二叉树的最小深度 222.完全二叉树的节点个数 104.二叉树的最大深度 &#xff08;优先掌握递归&#xff09; 什么是深度&#xff0c;什么是高度&#xff0c;如何求深度&#xff0c;如何求高度&#xff0c;这里有关系到二叉树的遍…

MPNN、GCN、DenseNet blocks之间的关系,GNN中“层”是什么意思?

关于GCN的普及理解&#xff1a;简单粗暴带你快速理解GNN_哔哩哔哩_bilibili GNN中层是什么意思&#xff1f; GNN中的层的意思是每次消息传递一次就叫一个层&#xff0c;在图神经网络&#xff08;GNN&#xff09;中&#xff0c;每进行一次消息传递和更新操作通常被称为一个“…