专栏首页编程微刊uni-app学习笔记-卡片布局(五)

uni-app学习笔记-卡片布局(五)

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>

效果如下

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序调用天气接口并且渲染在页面

    五分钟上手-微信小程序组件库 iView Weapp https://www.jianshu.com/p/09b4515152ff

    王小婷
  • uni-app请求新闻接口api,渲染新闻列表

    在网上找了一个免费的新闻api http://v.juhe.cn/toutiao/index?type=top&key=3dc86b09a2ee2477a5b...

    王小婷
  • uni-app实现一个循环卡片效果

    ColorUI-UniApp是一款适应于H5、微信小程序、安卓、ios、支付宝的高颜值,高度自定义的Css组件库,项目里好多地方都用的到这个UI组件 今天记录一...

    王小婷
  • dsp builder 11.0 使用过程中产生的问题及解决方案

    在matlab R2011b command窗口下,输入以下命令 >>  dos('lmutil lmdiag C4D5_512A') lmutil - ...

    s1mba
  • 中台之上(六):如何为一个商业银行设计业务架构?

    从实际操作的角度讲,企业级业务架构设计及其建模过程是一个充满可能性和争议的过程,并没有一个直观的量化标准能够用于判断一个架构方案的好坏,我们可以通过一个虚拟的例...

    用户6900693
  • 如何在SAP云平台ABAP编程环境里把CDS view暴露成OData服务

    Jerry 2016年在学习SAP CDS view时,曾经写过一个CDS view的自学系列,其中有一篇提到了一个很方便的注解:

    Jerry Wang
  • 深度学习中的模型修剪

    本在本文中,我们将介绍深度学习背景下的模型修剪机制。模型修剪是一种丢弃那些不代表模型性能的权重的艺术。精心修剪的网络会使其压缩版本更好,并且它们通常变得适合设备...

    deephub
  • 家装、餐饮、电商、地产信息流广告投放策略和案例

    最近比较多的时间在研究流量,其实单单就“流量”两个字包含的就非常多,在研究的过程中也搜集了很多案例,并且尝试与数据结合起来,具体资料如下:

    沉默的白面书生
  • Vue 组件间通信方法汇总

    除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案。文章整理一下父子组件、兄弟组件、祖先后代组件间是如何通信的。 ?

    JS菌
  • 优化算法——坐标上升法

    坐标上升法(Coordinate Ascent)每次通过更新函数中的一维,通过多次的迭代以达到优化函数的目的。

    zhaozhiyong

扫码关注云+社区

领取腾讯云代金券