導(dǎo)航類組件: navigation-bar

navigation-bar

頁面導(dǎo)航條配置節(jié)點，用于指定導(dǎo)航欄的一些屬性。只能是 page-meta組件內(nèi)的第一個節(jié)點，需要配合它一同使用。

navigation-bar屬性：

title：導(dǎo)航條標(biāo)題
titleIcon：導(dǎo)航條標(biāo)題
background-color：導(dǎo)航條背景顏色
font-color：導(dǎo)航條前景顏值，包括按鈕，標(biāo)題，狀態(tài)欄的顏色，僅支持#ffffff和#000000
loading：是否在導(dǎo)航條背景后顯示loading加載

navigation-bar導(dǎo)航組件示例(2).png

image.png

//實現(xiàn)源碼
<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: '標(biāo)題',
            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(默認值)：不保持縱橫比縮放圖片，使圖片完全適應(yīng)
• aspectFit：保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來
• aspectFill：保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來
• widthFix：寬度不變，高度自動變化，保持原圖寬高比不變
• heightFix：高度不變，寬度自動變化，保持原圖寬高比不變
• top：不縮放圖片，只顯示圖片的頂部區(qū)域
• bottom：不縮放圖片，只顯示圖片的底部區(qū)域
• center：不縮放圖片，只顯示圖片的中間區(qū)域
• left：不縮放圖片，只顯示圖片的左邊區(qū)域
• right：不縮放圖片，只顯示圖片的右邊邊區(qū)域
• top left：不縮放圖片，只顯示圖片的左上邊區(qū)域
• top right：不縮放圖片，只顯示圖片的右上邊區(qū)域
• bottom left：不縮放圖片，只顯示圖片的左下邊區(qū)域
• bottom right：不縮放圖片，只顯示圖片的右下邊區(qū)域

video(視頻播放組件)

視頻組件.png

video屬性：
src：要播放視頻的資源地址
autoplay:是否默認播放
loop：是否循環(huán)播放
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 商品導(dǎo)航
  
  GoodsNav 商品導(dǎo)航.png

//template引入方式：
<view class="uni-bottom">
        <uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
</view>

GoodsNav 商品導(dǎo)航屬性：
options：組件參數(shù)
buttonGroup ：組件按鈕組參數(shù)
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：自定義當(dāng)前時間，默認為今天
lunar：顯示農(nóng)歷
startDate：日期選擇范圍-開始日期
endDate：日期選擇范圍-結(jié)束日期
range：范圍選擇
insert：插入模式,可選值，true：插入模式；false：彈窗模式；默認為插入模式
clearDate：彈窗模式是否清空上次選擇內(nèi)容
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：設(shè)置“查看更多”的文本
single：是否單行
scrollable：是否滾動，為true時，NoticeBar為單行
showIcon：是否顯示左側(cè)喇叭圖標(biāo)
showClose：是否顯示左側(cè)關(guān)閉按鈕
showGetMore：是否顯示右側(cè)查看更多圖標(biāo)，為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="列表禁用狀態(tài)" ></uni-list-item>
        <uni-list-item title="列表文字" note="列表描述信息"  @switchChange="switchChange" :showBadge="true" :showSwitch="true"></uni-list-item>
</uni-list>

List 列表屬性：
title：標(biāo)題
note：描述
ellipsis title ：是否溢出隱藏，可選值，0:默認; 1:顯示一行; 2:顯示兩行
thumb：左側(cè)縮略圖，若thumb有值，則不會顯示擴展圖標(biāo)
thumbSize：略縮圖尺寸，可選值，lg:大圖; medium:一般; sm:小圖
showBadge：是否顯示數(shù)字角標(biāo)
badgeText：數(shù)字角標(biāo)內(nèi)容
rightText：右側(cè)文字內(nèi)容
disabled：是否禁用