uni-app学习笔记-卡片布局（五）

王小婷

发布于 2025-05-19 07:20:08

6300

代码可运行

文章被收录于专栏：编程微刊编程微刊

运行总次数：0

代码可运行

1：将时间插件-timePicker导入到开发工具HBuilderX

2:导入之后可以看到在我的项目底下多出了一个组件components文件夹

3：根据文档示例： https://ext.dcloud.net.cn/plugin?id=22 来写页面代码

代码如下:

<template>
    <view class="content">
        <!-- 一般用法 -->
        <uni-card title="标题文字" thumbnail="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" extra="额外信息" note="Tips">
            内容主体，可自定义内容及样式
        </uni-card>
        
        <!-- 内容通栏 -->
        <uni-card is-full="true" title="DCloud" thumbnail="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" extra="2018.12.12" >
            <image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" style="width: 100%;"></image>
        </uni-card>
        
        <!-- 图文卡片模式 -->
        <uni-card
            title="标题文字"
            mode="style"
            :is-shadow="true"
            thumbnail="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg"
            extra="Dcloud 2019-05-20 12:32:19"
            note="Tips"
        >
                那是一个秋意盎然、金风送爽的日子，我和父母一起来到了位于上师大旁的康健园。一踏进公园，一股浓郁的桂香扑鼻而来，泌人心脾,让我心旷神怡，只见一朵朵开得正烈的金色桂花，迎风而立，仿佛在向我招手。我们追着这桂香，走进了清幽的公园。
        </uni-card>
        
        <!-- 标题卡片模式 -->
        <uni-card 
            title="Dcloud" 
            mode="title" 
            :is-shadow="true" 
            thumbnail="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg" 
            extra="技术没有上限" 
            note="Tips"
        >
            那是一个秋意盎然、金风送爽的日子,我和父母一起来到了位于上师大旁的康健园.一踏进公园,一股浓郁的桂香扑鼻而来,泌人心脾,让我心旷神怡,只见一朵朵开得正烈的金色桂花,迎风而立,仿佛在向我招手.我们追着这桂香,走进了清幽的公园.
        </uni-card>
        
        <!-- 自定义底部按钮 -->
        <uni-card title="Dcloud" note="true">
            默认内容
            <template v-slot:footer>
                <view class="footer-box">
                    <view>喜欢</view>
                    <view>评论</view>
                    <view>分享</view>
                </view>
            </template>
        </uni-card>
    </view>
</template>
<script>
    import uniCard from '@/components/uni-card/uni-card.vue'

    export default {
         components: {uniCard},
        data() {
            return {
                title: 'Hello'
            };
        },
        onLoad() {},
        methods: {}
    };
</script>
<style>
    .content {
        text-align: center;
        height: 400upx;
        margin-top: 200upx;
    }
</style>