导航类组件: navigation-bar
navigation-bar
页面导航条配置节点，用于指定导航栏的一些属性。只能是 page-meta组件内的第一个节点，需要配合它一同使用。
navigation-bar属性：
title：导航条标题
titleIcon：导航条标题
background-color：导航条背景颜色
font-color：导航条前景颜值，包括按钮，标题，状态栏的颜色，仅支持#ffffff和#000000
loading：是否在导航条背景后显示loading加载
navigation-bar导航组件示例(2).png
image.png
//实现源码
<template>
<view class="">
<page-meta>
<navigation-bar
:title="nbTitle"
:titleIcon="titleIcon"
:title-icon-radius="titleIconRadius"
:subtitleText="subtitleText"
:subtitle-color="nbFrontColor"
:loading="nbLoading"
:front-color="nbFrontColor"
:background-color="nbBackgroundColor"
:color-animation-duration="2000"
color-animation-timing-func="easeIn"
/>
</page-meta>
</view>
</template>
<script>
export default {
data() {
return {
nbTitle: '标题',
titleIcon: '/static/logo.png',
titleIconRadius: '20rpx',
subtitleText: 'subtitleText',
nbLoading: true,
nbFrontColor: '#ffffff',
nbBackgroundColor: '#7EBC86'
}
},
onLoad() {
},
methods: {
}
}
</script>
媒体组件: image，video
image(图片容器)
image的mode有效值共有13种模式，4种缩放模式，9种是裁剪模式
- scaleToFill(默认值)：不保持纵横比缩放图片，使图片完全适应
- aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来
- aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来
- widthFix：宽度不变，高度自动变化，保持原图宽高比不变
- heightFix：高度不变，宽度自动变化，保持原图宽高比不变
- top：不缩放图片，只显示图片的顶部区域
- bottom：不缩放图片，只显示图片的底部区域
- center：不缩放图片，只显示图片的中间区域
- left：不缩放图片，只显示图片的左边区域
- right：不缩放图片，只显示图片的右边边区域
- top left：不缩放图片，只显示图片的左上边区域
- top right：不缩放图片，只显示图片的右上边区域
- bottom left：不缩放图片，只显示图片的左下边区域
- bottom right：不缩放图片，只显示图片的右下边区域
video(视频播放组件)
视频组件.png
video属性：
src：要播放视频的资源地址
autoplay:是否默认播放
loop：是否循环播放
muted：是否静音播放
danmu-btn：是否展示弹幕按钮
show-fullscreen-btn：是否显示全屏按钮
扩展组件
引入方式
1.前往DCloud插件市场下载该组件ZIP包。
2.ZIP包解压后放入公共组件components文件夹中。
3.页面引入import {uniCalendar,uniGoodsNav,uniNoticeBar,WucTab} from '@/components/uni-calendar/uni-calendar.vue'
4.注册组件components: { uniCalendar,uniGoodsNav,uniNoticeBar,WucTab }
实例
-
GoodsNav 商品导航
GoodsNav 商品导航.png
//template引入方式：
<view class="uni-bottom">
<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
</view>
GoodsNav 商品导航属性：
options：组件参数
buttonGroup ：组件按钮组参数
fill：按钮是否平铺
text ：按钮文字
backgroundColor：按钮背景色
color：字体颜色
-
Calendar 日历
Calendar 日历.png
//template引入方式：
<view>
<button type="default" @click="open">打开日历</button>
<uni-calendar
:clearDate="true"
:insert="false"
:lunar="true"
ref="calendar"
:start-date="'2019-3-2'"
:end-date="'2019-5-20'"
@confirm="change"
></uni-calendar>
</view>
Calendar 日历属性：
date String：自定义当前时间，默认为今天
lunar：显示农历
startDate：日期选择范围-开始日期
endDate：日期选择范围-结束日期
range：范围选择
insert：插入模式,可选值，true：插入模式；false：弹窗模式；默认为插入模式
clearDate：弹窗模式是否清空上次选择内容
showMonth：是否显示月份为背景
-
NoticeBar 通告栏
NoticeBar 通告栏.png
//template引入方式：
<uni-notice-bar
showIcon="true"
showClose="true"
text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏">
</uni-notice-bar>
<uni-notice-bar
scrollable="true"
:speed="speed"
showIcon="true"
single="true"
text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏">
</uni-notice-bar>
NoticeBar 通告栏属性：
speed：文字滚动的速度，默认100px/秒
text：显示文字
background-color： 背景颜色
color： 文字颜色
moreColor：查看更多文字的颜色
moreText：设置“查看更多”的文本
single：是否单行
scrollable：是否滚动，为true时，NoticeBar为单行
showIcon：是否显示左侧喇叭图标
showClose：是否显示左侧关闭按钮
showGetMore：是否显示右侧查看更多图标，为true时，NoticeBar为单行
-
List 列表
image.png
//template引入方式：
<uni-list>
<uni-list-item title="列表文字" link to="../index" @click="onClick"></uni-list-item>
<uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item>
<uni-list-item title="列表文字" note="列表描述信息" @switchChange="switchChange" :showBadge="true" :showSwitch="true"></uni-list-item>
</uni-list>
List 列表属性：
title：标题
note：描述
ellipsis title ：是否溢出隐藏，可选值，0:默认; 1:显示一行; 2:显示两行
thumb：左侧缩略图，若thumb有值，则不会显示扩展图标
thumbSize：略缩图尺寸，可选值，lg:大图; medium:一般; sm:小图
showBadge：是否显示数字角标
badgeText：数字角标内容
rightText：右侧文字内容
disabled：是否禁用
网友评论