官方組件：uni-card 卡片 - DCloud 插件市場?

效果1：

<template><view><uni-card>標(biāo)題卡片帶有一個雙標(biāo)題頭部，右側(cè)為額外描述信息 ，內(nèi)容可自定義實現(xiàn)</uni-card><uni-card :isShadow="true" @click="clickCard">標(biāo)題卡片帶有一個雙標(biāo)題頭部，右側(cè)為額外描述信息 ，內(nèi)容可自定義實現(xiàn)</uni-card></view> </template><script> export default {components: {},data() {return {};},methods: {clickCard() {uni.showToast({title: '點擊卡片',icon: 'none'});}} }; </script><style></style>

效果2：

<template><view><uni-card :isShadow="true" title="標(biāo)題內(nèi)容" mode="basic" extra="技術(shù)沒有上限" @click="clickCard"><view><view style="height: 350rpx;"><image style="height: 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;">標(biāo)題卡片帶有一個雙標(biāo)題頭部，右側(cè)為額外描述信息 ，內(nèi)容可自定義實現(xiàn)</text></view></view></uni-card></view> </template><script> export default {components: {},data() {return {};},methods: {clickCard() {uni.showToast({title: '點擊卡片',icon: 'none'});},} }; </script>

效果3：

<template><view><uni-card:isShadow="true"title="標(biāo)題內(nèi)容"subTitle="副標(biāo)題"mode="basic"thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"extra="技術(shù)沒有上限"note="slot卡槽默認(rèn)內(nèi)容"@click="clickCard"><view><view style="height: 350rpx;"><image style="height: 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;">標(biāo)題卡片帶有一個雙標(biāo)題頭部，右側(cè)為額外描述信息 ，內(nèi)容可自定義實現(xiàn)</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>

總結(jié)

以上是生活随笔為你收集整理的uniapp组件-Card卡片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。