uniapp组件-Card卡片

青旅半醒 2021-07-26 02:24 1506阅读 0赞

官方组件：[https://ext.dcloud.net.cn/plugin?id=22][https_ext.dcloud.net.cn_plugin_id_22]

## 效果1： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

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

## 效果2： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

<template>
    	<view>
    		<uni-card :isShadow="true" title="标题内容" subTitle="副标题" mode="basic" extra="技术没有上限" @click="clickCard">
    			<view>
    				<view style="height: 350rpx;">
    					<image style="width: 100%;" mode="aspectFill" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg" />
    				</view>
    				<view class="content-box"><text style="font-size: 12px;">标题卡片带有一个双标题头部，右侧为额外描述信息 ，内容可自定义实现</text></view>
    			</view>
    		</uni-card>
    	</view>
    </template>
    
    <script>
    export default {
    	components: {},
    	data() {
    		return {};
    	},
    	methods: {
    		clickCard() {
    			uni.showToast({
    				title: '点击卡片',
    				icon: 'none'
    			});
    		},
    		footerClick(types) {
    			uni.showToast({
    				title: types,
    				icon: 'none'
    			});
    		}
    	}
    };
    </script>
    
    <style></style>

## 效果3： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4][]

<template>
    	<view>
    		<uni-card
    			:isShadow="true"
    			title="标题内容"
    			subTitle="副标题"
    			mode="basic"
    			thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
    			extra="技术没有上限"
    			note="slot卡槽默认内容"
    			@click="clickCard"
    		>
    			<view>
    				<view style="height: 350rpx;">
    					<image style="width: 100%;" mode="aspectFill" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg" />
    				</view>
    				<view class="content-box"><text style="font-size: 12px;">标题卡片带有一个双标题头部，右侧为额外描述信息 ，内容可自定义实现</text></view>
    			</view>
    			<template slot="footer">
    				<view class="footer-box">
    					<view @click.stop="footerClick('喜欢')"><text class="footer-box__item">喜欢</text></view>
    					<view @click.stop="footerClick('评论')"><text class="footer-box__item">评论</text></view>
    					<view @click.stop="footerClick('分享')"><text class="footer-box__item">分享</text></view>
    				</view>
    			</template>
    		</uni-card>
    	</view>
    </template>
    
    <script>
    export default {
    	components: {},
    	data() {
    		return {};
    	},
    	methods: {
    		clickCard() {
    			uni.showToast({
    				title: '点击卡片',
    				icon: 'none'
    			});
    		},
    		footerClick(types) {
    			uni.showToast({
    				title: types,
    				icon: 'none'
    			});
    		}
    	}
    };
    </script>
    
    <style>
    .footer-box {
    	display: flex;
    	justify-content: space-between;
    	flex-direction: row;
    }
    
    .footer-box__item {
    	font-size: 12px;
    	color: #666;
    }
    </style>

[https_ext.dcloud.net.cn_plugin_id_22]: https://ext.dcloud.net.cn/plugin?id=22
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/aefe5b414354475abb039654fec5bfc1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/a5eefff4aa7d449d9f2bbcdf7189182a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210221094313679.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210221094342441.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4]: /images/20210725/2a177dc709b14303900d89ede41eb127.png