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余场。与此同时&…

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

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

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

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

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

双三次贝塞尔曲线的定义 双三次贝塞尔曲面是由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…

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.形状轮廓 ---“红色…

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

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

数据结构—栈实现后缀表达式的计算

后缀表达式计算 过程分析 中缀表达式 &#xff08;15&#xff09;*3 > 后缀表达式 153* (可参考这篇文章&#xff1a;中缀转后缀) 第一步&#xff1a;我们从左至右扫描 后缀表达式(已经存放在一个字符数组中)&#xff0c;遇到第一个数字字符 ‘1’ 放入栈中第二步&#xf…

幻兽帕鲁服务器出租,腾讯云PK阿里云怎么收费?

幻兽帕鲁服务器价格多少钱&#xff1f;4核16G服务器Palworld官方推荐配置&#xff0c;阿里云4核16G服务器32元1个月、96元3个月&#xff0c;腾讯云换手帕服务器服务器4核16G14M带宽66元一个月、277元3个月&#xff0c;8核32G22M配置115元1个月、345元3个月&#xff0c;16核64G3…

存储技术架构演进

一. 演进过程 存储技术架构的演进主要是从集中式到分布式的一种呈现&#xff0c;集中式存储模式凭借其在稳定性和可靠性方面的优势成为许多业务数据库的数据存储首选&#xff0c;顾名思义&#xff0c;集中式存储主要体现在集中性&#xff0c;一套集中式管理的存储系统&#xff…

python:socket基础操作(4)-《tcp客户端基础》

tcp就和udp不一样了&#xff0c;tcp是客户端和服务器端&#xff0c;如果想通过tcp发送数据&#xff0c;要先让tcp进行连接服务器端 tcp客户端 先让服务器端进行启动 import socketdef main():# 创建套接字tcp_client_socket socket.socket(socket.AF_INET,socket.SOCK_STREAM…

RSTP的P/A机制

如图所示根桥S1和S2之间新添加了一条链路,在当前状态下S2的另外几个端口p2是Alternate端口,p3是指定端口且处于Forwarding状态,p4是边缘端口。新链路连接成功后,P/A机制协商过程如下。 1.P0和P1两个端口马上都先成为指定端口发送RS TBPDU。 2.S2的P1口收到更优的RST BPD…

Google Chrome 中出现 ERR_SSL_KEY_USAGE_INCOMPATIBLE 错误

证书的方式发生了变化&#xff0c;出现了这个新错误&#xff0c;导致我无法浏览该网站。 可以右键属性获取位置 关闭导航器chrome并转到文件夹&#xff0c;找到Local State文件并删除 执行指令结束进程&#xff0c;重新打开浏览器即可 taskkill /im "chrome.exe"…

fastapi报错

初始化报错&#xff0c;非常低级错&#xff0c;扇自己10八张 app FastApi()

sqli.labs靶场(第18~22关)

18、第十八关 经过测试发现User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:122.0) Gecko/20100101 Firefox/122.0加引号报错 这里我们闭合一下试试 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:122.0) Gecko/20100101 Firefox/122.0,127.0.0.1,adm…

深度解析指针与数组:探索内存管理的艺术

目录 1.数组名的理解 sizeof(数组名)&#xff0c;sizef中单独放数组名&#xff0c;这里的数组名表示整个数组&#xff0c;计算的是整个数组的大小&#xff0c;单位是字节 &数组名&#xff0c;这里的数组名表示整个数组&#xff0c;取出的是整个数组的地址 (整个数组的地…