uni-app扩展组件(uni-ui)

目录

数字角标(uni-badge)

代码示例:

面包屑(uni-breadcrumb)

代码示例:

日历

代码示例

卡片(uni-card)

代码示例

倒计时(uni-countdown)

更多内容请访问官网


数字角标(uni-badge)

数字角标一般和其它控件(列表、9宫格等)配合使用,用于进行数量提示,默认为实心灰色背景。

使用方式是在HBuilder中创建项目,选择模板,uni-ui模板,输入名字后点击创建。

 

创建后,在pages/index/index.vue中,可以直接使用扩展组件,无须另外引入,下载。

代码示例:

<template>
    <view class="container">
        
        <view class="intro">本项目已包含uni ui组件,无需import和注册,可直接使用。在代码区键入字母u,即可通过代码助手列出所有可用组件。光标置于组件名称处按F1,即可查看组件文档。</view>
        <text class="intro">详见:</text>
        <uni-link :href="href" :text="href"></uni-link>
        <view>
            <view class="title">角标</view>
            <uni-badge class="ubg" text="99+" type="primary" absolute="rightBottom">
                <button type="default">右下方角标</button>
            </uni-badge>
            <uni-badge class="ubg" text="999+" type="success" absolute="rightTop">
                <button type="default">右上方角标</button>
            </uni-badge>
            <uni-badge class="ubg" text="9+" type="error" absolute="leftBottom">
                <button type="default">左下方角标</button>
            </uni-badge>
            <uni-badge class="ubg" text="999+" type="warning" absolute="leftTop">
                <button type="default">左上方角标</button>
            </uni-badge>
        </view>
    </view>
</template>

保存后,点击运行->运行到浏览器中后,就可以看到具体样式:

uni-app官网uni-app,uniCloud,serverlesshttps://uniapp.dcloud.net.cn/component/uniui/uni-badge.html

面包屑(uni-breadcrumb)

显示当前页面的路径,快速返回之前的任意页面。

代码示例:

<template>
    <view class="container">
        <view>
            <uni-breadcrumb separator="/">
              <uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
                {{route.name}}
              </uni-breadcrumb-item>
            </uni-breadcrumb>
        </view>
    </view>
</template>
​
<script>
    export default {
        data() {
            return {
                routes: [
                        {
                          to: "/A",
                          name: "A页面",
                        },
                        {
                          to: "/B",
                          name: "B页面",
                        },
                        {
                          to: "/C",
                          name: "C页面",
                        },
                      ],
            }
        },
    }
</script>

运行后效果:

当鼠标悬浮到B页面上时,会高亮显示,如果绑定了vue文件,点击后会跳转到该页面。

 

uni-app官网uni-app,uniCloud,serverlesshttps://uniapp.dcloud.net.cn/component/uniui/uni-breadcrumb.html

日历

日历组件可以查看日期,选择任意范围内的日期,打点操作。常用场景如:酒店日期预订、火车机票选择购买日期、上下班打卡等。

注意:

本组件农历转换使用的js是 @1900-2100区间内的公历、农历互转

date属性传入的应该是一个 String ,如: 2019-06-27 ,而不是 new Date()

通过 insert 属性来确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件,但是为了区分模式,现使用两个事件,这里需要注意

弹窗模式下无法阻止后面的元素滚动,如有需要阻止,请在弹窗弹出后,手动设置滚动元素为不可滚动

代码示例

<uni-calendar :insert="true"  :lunar="true" :start-date="'2023-01-01'" :end-date="'2023-12-30'" @change="change" />
属性名类型默认值说明
dateString-自定义当前时间,默认为今天
lunarBooleanfalse显示农历
startDateString-日期选择范围-开始日期
endDateString-日期选择范围-结束日期
rangeBooleanfalse范围选择
insertBooleanfalse插入模式,可选值,ture:插入模式;false:弹窗模式;默认为插入模式
clearDateBooleantrue弹窗模式是否清空上次选择内容
selectedArray-打点,期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
showMonthBooleantrue是否显示月份为背景

注意:

start-date和end-date的值,双引号中还有一层单引号。表示值为字符串。

uni-app官网uni-app,uniCloud,serverlesshttps://uniapp.dcloud.net.cn/component/uniui/uni-calendar.html

卡片(uni-card)

卡片组件通用来显示完整独立的一段信息,同时让用户理解他的作用。例如一篇文章的预览图、作者信息、时间等,卡片通常是更复杂和更详细信息的入口点。

属性名类型默认值说明
titleString-标题文字
sub-titleString-副标题文字
extraString-标题额外信息
thumbnailString-标题左侧缩略图,支持网络图片,本地图片,本图片需要传入一个绝对路径,如:/static/xxx.png
coverString-封面图,支持网络图片,本地图片,本图片需要传入一个绝对路径,如:/static/xxx.png
is-fullBooleanfalse卡片内容是否通栏,为true时将去除padding值
is-shadowBooleanfalse卡片内容是否开启阴影
shadowString0px 0px 3px 1px rgba(0, 0, 0, 0.08)卡片阴影,需符合 css 值
borderBooleantrue卡片边框
marginString10px卡片外边距
spacingString10px卡片内边距
paddingString10px卡片内容内边距
borderBooleantrue卡片边框
mode[弃用]Stringbasic卡片模式 ,可选值, basic:基础卡片 ;style :图文卡片 ; title :标题卡片
note[弃用]String-底部信息

代码示例

<view class="card-container">
    <uni-card>
        <view>
            基础卡片,不包含任何属性和设置,也不含任何css设置
        </view>
    </uni-card>
    <uni-card title="基础卡片" extra="额外信息" >
        <view>基础卡片,含有标题和额外信息。</view>
    </uni-card>
    <uni-card title="基础卡片" sub-title="副标题" extra="额外信息" thumbnail="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
        <view>这是一个带头像和双标题的基础卡片,分为主标题和副标题,此示例展示了一个完整的卡片缩略图。</view>
    </uni-card>
</view>

运行效果为:

 

uni-app官网

倒计时(uni-countdown)

代码示例

<view class="title">一般用法</view>
<uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
​
<view class="title">不显示天数</view>
<uni-countdown :show-day="false" :hour="12" :minute="12" :second="12"></uni-countdown>
​
<view class="title">修改背景颜色</view>
<uni-countdown color="#FFFFFF" background-color="#00B26A" border-color="#00B26A" :day="1" :hour="2" :minute="30" :second="0"></uni-countdown>

运行效果

 

更多内容请访问官网

uni-app官网uni-app,uniCloud,serverlesshttps://uniapp.dcloud.net.cn/component/uniui/uni-ui.html

 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

掩月天权

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值