uniapp制作app与小程序前端——卡片

最新推荐文章于 2025-02-12 11:29:23 发布

原创最新推荐文章于 2025-02-12 11:29:23 发布 · 2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #小程序 #学习方法 #前端

“考古”文章专栏收录该内容

62 篇文章

订阅专栏

该文章提供了uni-app中uni-card组件的使用教程，包括下载组件、编写代码示例以及展示点击事件的实现，最终呈现了卡片样式的实际效果。

卡片样式

一.下载组件
二.写入代码
三.效果图

一.下载组件

组件地址
在这里插入图片描述

二.写入代码

位置：
在这里插入图片描述
代码：

<template>
	<view>
		<uni-card>
				标题卡片带有一个双标题头部，右侧为额外描述信息 ，内容可自定义实现
		</uni-card>
		<uni-card :isShadow="true" @click="clickCard">
				标题卡片带有一个双标题头部，右侧为额外描述信息 ，内容可自定义实现
		</uni-card>
	</view>
</template>
 
<script>
export default {
	components: {},
	data() {
		return {};
	},
	methods: {
		clickCard() {
			uni.showToast({
				title: '点击卡片',
				icon: 'none'
			});
		}
	}
};
</script>
 
<style></style>