項目五uni-app擴展組件使用

項目五uni-app擴展組件使用

項目任務(wù)：任務(wù)1引入uni-ui框架任務(wù)2使用uni-ui擴展組件任務(wù)3綜合案例01任務(wù)1引入uni-ui框架

任務(wù)1引入uni-ui框架

uni-app的擴展組件統(tǒng)一封裝在uni-ui庫中。uni-ui庫是DCloud提供的一個基于Vue組件、Flex布局、無DOM的跨全端UI框架。在小程序和混合App開發(fā)領(lǐng)域中，uni-ui是性能最好的框架。uni-ui是對uni-app基本組件的補充，對開發(fā)中常用的基本組件進行進一步封裝和性能優(yōu)化。

uni-ui支持HBuilderX直接新建項目模板、DCloud插件市場導(dǎo)入和npm安裝3種方式引入。其中HBuilderX直接新建項目模板是最簡單的一種引入方式，此方式將直接創(chuàng)建一個帶有uni-ui框架的uni-app項目。這里直接創(chuàng)建一個uniappdemo5項目來引入uni-ui框架。

任務(wù)1引入uni-ui框架

任務(wù)1引入uni-ui框架

創(chuàng)建完畢后，項目的根目錄下會存在一個uni_modules目錄，如圖5-2所示。uni_modules目錄下存放的就是uni-ui框架中封裝的所有擴展組件。使用時所有的擴展組件無需import和注冊，可直接在頁面中使用。02任務(wù)2使用uni-ui擴展組件

5.2.1uni-badge數(shù)字角標組件

數(shù)字角標通常來標記重點信息使用，如接受到新消息、有未讀消息等。一般和其它控件（列表、9宮格等）配合使用，用于進行數(shù)量提示。uni-badge組件主要屬性屬性名類型默認值說明textStringnormal設(shè)置角標內(nèi)容typeStringdefault設(shè)置角標顏色，有效值為default（灰色）、primary（藍色）、success（綠色）、warning(黃色)、error(紅色)sizeStringnormal設(shè)置角標大小，有效值為normal和smallis-dotBooleanfalse設(shè)置角標不展示數(shù)字，只有一個小點max-numString/Number99設(shè)置text屬性最大數(shù)字值，超過99顯示99+custom-styleObject{}自定義設(shè)置角標樣式invertedBooleanfalse設(shè)置是否不需要背景顏色，值為true時背景顏色將變?yōu)槲淖值淖煮w顏色absoluteStringrightTop設(shè)置角標絕對定位，角標將定位到其包裹的標簽的四個角上，有效值為rightTop(右上角)、rightBottom（右下角）、leftBottom（左下角）、leftTop（左上角）。.nvue頁面不支持offsetArray[number]

距定位角中心點的偏移量，[-10,-10]表示向absolute指定的方向偏移10px，[10,10]表示向absolute指定的反方向偏移10px。僅在設(shè)置absolute屬性時有效，與absolute的值一一對應(yīng)，例如absolute值為rightTop，對應(yīng)offset為[right,Top]@click

點擊角標觸發(fā)click事件

5.2.1uni-badge數(shù)字角標組件

uni-badge使用示例代碼。<template>

<viewclass="view-class">

<uni-badgetext="123"type="primary"/>

</view>

<viewclass="view-class">

<uni-badgetext="123"absolute="rightTop"type="warning">

<view>右上</view>

</uni-badge>

</view>

<viewclass="view-class">

<uni-badgetext="123"absolute="rightTop"type="warning":offset="[-20,0]">

<view>右上偏移</view>

</uni-badge>

</view>

<viewclass="view-class">

<uni-badge:is-dot="true"text="123"absolute="rightTop"type="error">

<view>圓點</view>

</uni-badge>

</view></template><!--剩余代碼見下一頁-->

5.2.1uni-badge數(shù)字角標組件<scriptsetup></script><stylescoped>

.view-class{

text-align:center;

margin-top:20rpx;

}</style>在微信開發(fā)者工具運行效果。

5.2.2uni-breadcrumb面包屑組件

面包屑組件用于在當前頁面中實現(xiàn)層級關(guān)系的導(dǎo)航欄菜單列表，單擊任意一個導(dǎo)航欄均可跳轉(zhuǎn)到指定頁面。uni-breadcrumb組件屬性屬性名類型默認值說明separatorString斜杠'/'設(shè)置面包屑組件內(nèi)部各層級分隔符separatorClassString

設(shè)置分隔符的樣式類uni-breadcrumb組件內(nèi)部元素通過uni-breadcrumb-item子組件來放置。

uni-breadcrumb-item子組件屬性屬性名類型默認值說明toString

設(shè)置路由跳轉(zhuǎn)頁面路徑replaceBoolean

在使用to進行路由跳轉(zhuǎn)時，設(shè)置replace將不會向history添加新記錄，該屬性僅Web端支持

5.2.1uni-badge數(shù)字角標組件

uni-breadcrumb使用示例代碼。<template> <view> <uni-breadcrumbseparator=">"> <uni-breadcrumb-itemv-for="(route,index)inroutes":key="index":to="route.to"> {{}} </uni-breadcrumb-item> </uni-breadcrumb> </view></template><scriptsetup> import{reactive}from'vue' letroutes=reactive([ { to:"/pages/index/index", name:"首頁" },{ to:"/pages/uni-badge/uni-badge", name:"菜單A" },//剩余代碼見下一頁

5.2.1uni-badge數(shù)字角標組件{ to:"", name:"菜單B" }])</script><style></style>在微信開發(fā)者工具運行效果。單擊“首頁”跳轉(zhuǎn)到index.vue頁面，單擊“菜單A”跳轉(zhuǎn)到uni-badge.vue頁面，單擊“菜單B”不跳轉(zhuǎn)頁面。

5.2.3uni-calendar日歷組件

日歷組件用于選擇日期。一般用在酒店日期預(yù)訂、火車機票選擇購買日期、上下班打卡等場景中。

uni-calendar組件屬性屬性名類型默認值說明dateString

設(shè)置當前時間，默認為今天lunarBooleanfalse設(shè)置顯示農(nóng)歷日歷startDateString

設(shè)置日期選擇范圍的開始日期endDateString

設(shè)置日期選擇范圍的結(jié)束日期rangeBooleanfalse設(shè)置范圍選擇日期insertBooleantrue設(shè)置日歷組件插入模式，有效值為true（插入模式）和false（彈窗模式）。當insert為false時，可調(diào)用uni-calendar的open方法打開日歷組件clearDateBooleantrue設(shè)置日歷組件彈窗時是否清空上次選擇內(nèi)容，僅彈窗模式時生效selectedArray

選中日期，格式為[{date:'2019-06-27',info:'簽到',data:{custom:'自定義信息',name:'自定義消息頭',xxx:xxx...}}]showMonthBooleantrue設(shè)置是否顯示月份為背景@changeEventHandle

僅插入模式時生效，日期改變時觸發(fā)，獲取單擊的日期值@confirmEventHandle

僅彈出模式時生效，確認選擇時觸發(fā)，獲取單擊的日期值@monthSwitchEventHandle

切換月份時觸發(fā)，獲取單擊的年月值

5.2.3uni-calendar日歷組件

日歷組件使用示例代碼。<template>

<view>

<uni-calendar

:selected="selectedDate"

:insert="true":lunar="true":start-date="startDate"

:end-date="endDate"@change="change"

:show-month="true"/>

</view>

<view>單擊的日期：{{clickDate}}</view></template><scriptsetup>

import{ref,reactive}from'vue';

letstartDate=ref(parseDate(newDate(),-60))

letendDate=ref(parseDate(newDate(),30))

letselectedDate=reactive([

{

date:parseDate(newDate(),-2),

info:'已簽到'

},{

date:parseDate(newDate(),-1),

info:'已簽到'

},

])//剩余代碼見下一頁

5.2.3uni-calendar日歷組件

letclickDate=ref("")

functionchange(e){

clickDate.value=e.fulldate

}

//日期格式轉(zhuǎn)換

functionparseDate(date,AddDayCount=0){

if(typeofdate!=='object'){

date=date.replace(/-/g,'/')

}

constdt=newDate(date)

//獲取AddDayCount天后的日期

dt.setDate(dt.getDate()+AddDayCount)

constyear=dt.getFullYear()

//獲取當前月份的日期，不足10補0

constmonth=dt.getMonth()+1<10?'0'+(dt.getMonth()+1):dt.getMonth()+1

//獲取當前幾號，不足10補0

constday=dt.getDate()<10?'0'+dt.getDate():dt.getDate()

returnyear+'-'+month+'-'+day

}</script><style></style>

5.2.3uni-calendar日歷組件在微信開發(fā)者工具運行效果。注意：uni-calendar組件不支持動態(tài)簽到狀態(tài)的更新，如需實現(xiàn)打卡簽到功能，需和后端代碼配合使用，利用數(shù)據(jù)庫存儲簽到日期數(shù)據(jù)，簽到成功后重新加載頁面即可。

5.2.4uni-card卡片組件

卡片組件用于顯示完整獨立的一段信息，作為更復(fù)雜詳細信息的入口點。例如發(fā)布新聞時，新聞的預(yù)覽圖、作者信息、時間等就可以使用卡片組件來展現(xiàn)。uni-card組件屬性屬性名類型默認值說明titleString

設(shè)置卡片標題文字sub-titleString

設(shè)置卡片副標題文字extraString

設(shè)置卡片標題額外信息thumbnailString

設(shè)置標題左側(cè)縮略圖，支持網(wǎng)絡(luò)圖片和本地圖片，本地圖片需要傳入絕對路徑如：/static/xxx.pngcoverString

設(shè)置標題封面圖，支持網(wǎng)絡(luò)圖片和本地圖片，本地圖片需要傳入絕對路徑如：/static/xxx.pngis-fullBooleanfalse設(shè)置卡片內(nèi)容是否通欄，通欄卡片沒有外邊距，左右會貼合父元素is-shadowBooleanfalse設(shè)置卡片內(nèi)容是否開啟陰影shadowString

設(shè)置卡片陰影，需符合CSS值marginString10px設(shè)置卡片外邊距spacingString10px設(shè)置卡片內(nèi)邊距paddingString10px設(shè)置卡片內(nèi)容邊距borderBooleantrue設(shè)置卡片邊框@clickEventHandle

單擊卡片時觸發(fā)，獲取單擊卡片的區(qū)域，值為title、extra、content、cover、actions等cover

設(shè)置封面圖插槽title

設(shè)置卡片頭部插槽actions

設(shè)置卡片底部操作欄插槽

5.2.4uni-card卡片組件

uni-card組件使用示例代碼。<template> <view> <uni-cardtitle="基礎(chǔ)卡片"sub-title="副標題"extra="額外信息":thumbnail="avatar"@click="onClick"> <text>帶頭像和雙標題卡片</text> </uni-card> <uni-card:cover="cover"@click="onClick"> <text>帶封面和操作欄的卡片</text> <viewslot="actions"class="card-actions"> <viewclass="card-actions-item"@click="onClick('分享')"> <uni-iconstype="circle"size="18"color="#999"></uni-icons> <textclass="card-actions-item-text">分享</text> </view> <viewclass="card-actions-item"@click="onClick('點贊')"> <uni-iconstype="heart"size="18"color="#999"></uni-icons> <textclass="card-actions-item-text">點贊</text> </view> </view> <uni-list><uni-list-itemtitle="今日新聞"showArrow></uni-list-item></uni-list> </uni-card> </view></template><!--剩余代碼見下一頁-->

5.2.4uni-card卡片組件<scriptsetup>letcover="/static/logo.png"letavatar="/static/logo.png"functiononClick(e){console.log(e)}</script><stylescoped> .card-actions-item{ display:flex; flex-direction:row; align-items:center; } .card-actions-item-text{ font-size:12px; margin-left:5px; } .card-actions{ display:flex; flex-direction:row; justify-content:space-around; align-items:center; height:45px; border-top:1px#eeesolid; }</style>

5.2.4uni-card卡片組件在微信開發(fā)者工具運行效果。

5.2.5uni-list列表組件

uni-list是一個列表組件，用于實現(xiàn)導(dǎo)航列表、通信錄列表、聊天記錄列表等。uni-list組件有兩個子組件分別是uni-list-item和uni-list-chat。其中uni-list-item用于制作通用的列表，uni-list-chat用于制作聊天列表。

使用時uni-list只有一個屬性border，值為Boolean類型，用于設(shè)置列表是否顯示邊框，默認值為false。uni-list-item子組件屬性較多，這里不一一列舉。如果uni-list-item組件內(nèi)置屬性樣式無法滿足需求，可以使用插槽來自定義uni-list-item里的內(nèi)容使用。插槽時內(nèi)置樣式將會失效，只保留排版樣式，此時的樣式需要開發(fā)者自己實現(xiàn)。uni-list-item提供了3個可擴展的插槽header、body和footer。開發(fā)者可以只用1個插槽，也可以3個一起使用。在插槽中可使用view標簽包裹內(nèi)容實現(xiàn)自己所需的效果。

5.2.5uni-list列表組件

uni-list-chat聊天列表子組件的主要屬性。

uni-list-chat組件主要屬性屬性名類型默認值說明titleString

設(shè)置列表行的標題noteString

設(shè)置列表行的描述信息badgeTextString

設(shè)置數(shù)字角標內(nèi)容badgePositonStringright設(shè)置數(shù)字角標位置badgeStyleObject

設(shè)置數(shù)字角標樣式，有效值同uni-badge的custom-style屬性linkStringnavigateTo新頁面跳轉(zhuǎn)方式，有效值同uni-list-item組件toString

設(shè)置新頁面跳轉(zhuǎn)地址，如填寫此屬性，可在click事件中通過e.data獲取跳轉(zhuǎn)信息clickableBooleanfalse設(shè)置是否開啟點擊反饋timeString

設(shè)置右側(cè)時間顯示avatarCircleBooleanfalse設(shè)置是否顯示圓形頭像avatarString

設(shè)置頭像地址，avatarCircle不填時生效avatarListArray

設(shè)置頭像組地址，格式為[{url:''}]@clickEventHandle

點擊uni-list-chat觸發(fā)事件，需配置clickable屬性值為true

5.2.5uni-list列表組件

uni-list-item和uni-list-chat子組件制作通用列表和聊天列表的示例代碼。<template>

<view>

<uni-list:border="true">

<uni-list-itemshowArrowshowSwitchshowExtraIcon

title="列表文字"note="列表描述信息"rightText="右側(cè)文字"

:extraIcon="extraIcon"@switchChange="switchChange"/>

<uni-list-itemellipsis="2"title="測試文字以下是測試文字以下是測試文字以下是測試文字"

rightText="二行顯示"/>

<uni-list-itemtitle="關(guān)閉當前頁面打開新頁面"

showArrowlink="navigateTo"to="/pages/index/index"

@click="onClick"/>

</uni-list> <!--uni-list插槽--> <uni-list> <uni-list-item> <templatev-slot:body> <viewclass="slot-box"> <textclass="slot-text">使用body插槽</text> </view> </template> </uni-list-item> <!--剩余代碼見下一頁-->

5.2.5uni-list列表組件

<uni-list-itemtitle="自定義右側(cè)插槽"linkto="/pages/index/index">

<templatev-slot:footer>

<imageclass="slot-image"src="/static/logo.png"

mode="widthFix"></image>

</template>

</uni-list-item>

<uni-list-item>

<templatev-slot:header>

<viewclass="slot-box">

<imageclass="slot-image"src="/static/logo.png"></image>

</view>

</template>

<templatev-slot:body>

<textclass="slot-boxslot-text">自定義兩側(cè)插槽</text>

</template>

<templatev-slot:footer>

<imageclass="slot-image"src="/static/logo.png"

mode="widthFix"></image>

</template>

</uni-list-item>

</uni-list><!--剩余代碼見下一頁-->

5.2.5uni-list列表組件

<!--uni-list-chat-->

<viewstyle="text-align:center">聊天列表</view>

<uni-list>

<!--右側(cè)帶角標-->

<uni-list-chat:avatar-circle="true"title="uni-app":avatar="avatar"

:note="note":time="time"badge-text="12"></uni-list-chat>

<!--頭像顯示角標-->

<uni-list-chattitle="uni-app":avatar="avatar":note="note"

:time="time"badge-positon="left"badge-text="99"></uni-list-chat>

<!--顯示多頭像-->

<uni-list-chattitle="uni-app":avatar-list="avatarList"

:note="note":time="time"badge-positon="left"badge-text="dot"></uni-list-chat>

<!--自定義右側(cè)內(nèi)容-->

<uni-list-chattitle="uni-app":avatar-list="avatarList":note="note"

:time="time"badge-positon="left"badge-text="dot">

<view>

<text>剛剛</text>

<!--右側(cè)添加一個圖標-->

<uni-iconstype="star-filled"></uni-icons>

</view>

</uni-list-chat>

</uni-list>

</view></template><!--剩余代碼見下一頁-->

5.2.5uni-list列表組件<scriptsetup>

letextraIcon={

color:'#4cd964',

size:'22',

type:'image'

}

letavatar="/static/logo.png"

letavatarList=[{"url":avatar},{"url":avatar}]

letnote="收到一條信息"

lettime="2020-02-0220:20"

functionswitchChange(e){

console.log(e.value)

}

functiononClick(e){

console.log(e.data)

}</script><!--剩余代碼見下一頁-->

5.2.5uni-list列表組件<style>

.slot-box{

display:flex;

flex-direction:row;

align-items:center;

}

.slot-image{

display:block;

width:30px;

height:30px;

}

.slot-text{

flex:1;

}</style>

5.2.5uni-list列表組件在微信開發(fā)者工具運行效果。

5.2.6uni-collapse折疊面板組件

折疊面板用來折疊/顯示過長的內(nèi)容或者是列表。通常是在多內(nèi)容分類項使用，折疊不重要的內(nèi)容，顯示重要內(nèi)容。

uni-collapse組件屬性屬性名類型默認值說明value/v-modelString/Array

在面板顯示狀態(tài)改變時觸發(fā)(如果是手風(fēng)琴模式，參數(shù)類型為string，否則為array)accordionBooleanfalse是否開啟手風(fēng)琴效果。手風(fēng)琴效果指每次打開當前面板同時自動關(guān)閉其他已經(jīng)打開的面板，保證所有面板只有一個開啟@change EventHandle

切換面板時觸發(fā)，如果是手風(fēng)琴模式，返回類型為string，否則為array

注意：如果要在.nvue頁面中使用uni-collapse組件，需要在manifest.json的app-plus節(jié)點下配置"nvueStyleCompiler":"uni-app"。此外uni-collapse組件還有一個resize方法，用于解決動態(tài)添加數(shù)據(jù)，帶動畫的折疊面板高度不更新的問題。小程序端動態(tài)數(shù)據(jù)更新時需要手動調(diào)用，Web端和App端已做處理不用手動調(diào)用。

5.2.6uni-collapse折疊面板組件

uni-collapse組件內(nèi)部的內(nèi)容列表通過子組件uni-collapse-item來定義。uni-collapse-item子組件僅支持嵌套在uni-collapse內(nèi)部使用，不能獨立使用。

uni-collapse-item子組件主要屬性屬性名類型默認值說明titleString

設(shè)置標題文字thumbString

設(shè)置標題左側(cè)縮略圖disabledBooleanfalse設(shè)置是否禁用openBooleanfalse設(shè)置是否展開面板。當uni-collapse設(shè)置accordion為true時，open屬性則生效在最后一個uni-collapse-itemshow-animationBooleanfalse設(shè)置是否開啟動畫。動畫效果在App端開銷較大，請謹慎使用borderBooleantrue設(shè)置是否顯示折疊面板內(nèi)容分隔線title-borderStringauto設(shè)置折疊面板標題分隔線顯示狀態(tài)，有效值為auto（分隔線自動顯示）、none（不顯示分隔線）、show（一直顯示分隔線）show-arrowBooleantrue設(shè)置是否顯示右側(cè)箭頭

5.2.6uni-collapse折疊面板組件

uni-collapse組件使用示例代碼。<template> <view> <!--手風(fēng)琴效果--> <uni-collapseaccordion="true"> <uni-collapse-itemtitle="手風(fēng)琴效果1"> <text>折疊內(nèi)容1</text> </uni-collapse-item> <uni-collapse-itemtitle="手風(fēng)琴效果2"> <text>折疊內(nèi)容2</text> </uni-collapse-item> </uni-collapse> <!--標題文字帶圖片效果--> <uni-collapsev-model="value"> <uni-collapse-itemtitle="標題文字帶圖片1"

:thumb="thumb"> <view> <text>{{content}}</text> </view> </uni-collapse-item> <uni-collapse-itemtitle="標題文字帶圖片2":thumb="thumb"> <view> <text>{{content}}</text> </view> </uni-collapse-item> </uni-collapse> <!--剩余代碼見下一頁-->

5.2.6uni-collapse折疊面板組件 <view>展開的collapse索引為：{{value}}</view> <buttontype="primary"@click="click">動態(tài)修改collapse內(nèi)容</button> <!--標題插槽自定義標題--> <uni-collapse> <uni-collapse-item> <templatev-slot:title> <uni-list> <uni-list-itemtitle="標題插槽自定義標題" :show-extra-icon="true":extra-icon="extraIcon"> </uni-list-item> </uni-list> </template> <view> <text>折疊內(nèi)容主體，可自定義內(nèi)容及樣式</text> </view> </uni-collapse-item> </uni-collapse><!--剩余代碼見下一頁-->

5.2.6uni-collapse折疊面板組件 <!--折疊內(nèi)容使用uni-list組件展示--> <uni-collapse> <uni-collapse-itemtitle="折疊內(nèi)容使用uni-list組件"> <uni-list> <uni-list-itemtitle="列表文字"></uni-list-item> <uni-list-itemtitle="列表右側(cè)顯示switch" :show-switch="true"></uni-list-item> <uni-list-item:show-extra-icon="true":extra-icon="extraIcon" title="列表左側(cè)帶擴展圖標"></uni-list-item> <uni-list-itemtitle="列表左側(cè)帶略縮圖"note="列表描述信息" :thumb="thumb"thumb-size="lg"rightText="右側(cè)文字" showArrow></uni-list-item> </uni-list> </uni-collapse-item> </uni-collapse> </view></template><!--剩余代碼見下一頁-->

5.2.6uni-collapse折疊面板組件<scriptsetup> import{ref}from'vue'; letthumb="/static/logo.png" letcontent=ref("標題文字帶圖片") letvalue=ref(["0"]) letextraIcon={ color:'#4cd964', size:'26', type:'image' } functionclick(){ content.value="標題文字帶圖片"+"\n"+"標題文字帶圖片" }</script><style></style>

5.2.6uni-collapse折疊面板組件在微信開發(fā)者工具運行效果。

5.2.7uni-combox組合框組件

uni-combox組合框組件用于實現(xiàn)可以輸入的下拉框。該組件只能在.vue頁面中使用，.nvue頁面暫不支持。

uni-combox組合框組件屬性屬性名類型默認值說明labelString

設(shè)置標簽文字valueString

獲取combox的值labelWidthStringauto設(shè)置標簽寬度，例如'100px'placeholderString

設(shè)置輸入框占位符candidatesArray/String[]設(shè)置候選字段emptyTipsString無匹配項設(shè)置無匹配項時的提示語@inputEventHandle

combox輸入時觸發(fā)事件，返回combox值

5.2.7uni-combox組合框組件

uni-combox使用示例代碼。<template>

<viewclass="view-class">

有邊框combox：<uni-combox:candidates="candidates"placeholder="請選擇所在城市"v-model="city"></uni-combox>

<view>選擇的城市：{{city}}</view>

</view>

<viewclass="view-class">

無邊框combox：<uni-combox:border="false":candidates="candidates"placeholder="請選擇所在城市"></uni-combox>

</view>

<viewclass="view-class">

無匹配項combox：<uni-comboxemptyTips="這里啥都沒有"placeholder="請選擇所在城市"></uni-combox>

</view></template><scriptsetup>import{ref}from'vue'; letcandidates=["aa","bb","cc"] letcity=ref("aa")</script><stylescoped> .view-class{ margin-top:20rpx; }</style>

5.2.7uni-combox組合框組件在微信開發(fā)者工具運行效果。

5.2.8uni-countdown倒計時組件

uni-countdown是一個倒計時組件，通常用于秒殺、促銷等功能的倒計時計數(shù)。uni-countdown倒計時組件屬性屬性名類型默認值說明backgroundColorString#FFFFFF設(shè)置背景色colorString#000000設(shè)置文字顏色splitorColorString#000000設(shè)置分隔符合顏色dayNumber0設(shè)置天數(shù)hourNumber0設(shè)置小時minuteNumber0設(shè)置分鐘secondNumber0設(shè)置秒showDayBooleantrue設(shè)置是否顯示天數(shù)showHourBooleantrue設(shè)置是否顯示小時showMinuteBooleantrue設(shè)置是否顯示分鐘showColonBooleantrue設(shè)置是否以冒號作為分隔符startBooleantrue設(shè)置是否開始倒計時@timeup

倒計時時間結(jié)束會觸發(fā)timeup事件

5.2.8uni-countdown倒計時組件

uni-countdown使用示例代碼。<template>

<view>

<!--顯示時分秒天-->

<uni-countdown:day="1":hour="1":minute="12":second="40"/>

<!--顯示時分秒-->

<uni-countdown:show-day="false":hour="12":minute="12":second="12"/>

<!--設(shè)置時分秒文字分隔-->

<uni-countdown:minute="30":second="0":show-colon="false"/>

<!--設(shè)置背景色和字體大小-->

<uni-countdown:font-size="30":day="1":hour="2":minute="30"

:second="0"color="#FFFFFF"background-color="#007AFF"/>

<!--手動控制開始倒計時-->

<uni-countdown:start="start":show-day="false":second="10"@timeup="timeUp"/>

<buttontype="primary"size="mini"@click="click">開始倒計時</button>

</view></template><!--剩余代碼見下一頁-->

5.2.8uni-countdown倒計時組件<scriptsetup>import{ref}from'vue';

letstart=ref(false)

functiontimeUp(){

console.log("倒計時結(jié)束")

}

functionclick(){

console.log("倒計時開始")

start.value=true

}</script><style></style>在微信開發(fā)者工具運行效果。

5.2.9uni-data-checkbox數(shù)據(jù)選擇器組件

uni-data-checkbox組件是對uni-app基礎(chǔ)組件checkbox和radio的封裝和優(yōu)化，方便開發(fā)人員使用單選和多選功能。uni-data-checkbox組件提供數(shù)據(jù)綁定功能、自動表單校驗功能和一些現(xiàn)成的風(fēng)格樣式模板，能夠最大化減少開發(fā)人員代碼量。

uni-data-checkbox數(shù)據(jù)選擇器組件主要屬性屬性名類型默認值說明value/v-modelArray/String/Number

選中的值，multiple=true時為Array類型，否則為String或Number類型localdataArray

綁定本地的數(shù)據(jù)源，數(shù)組內(nèi)每個元素是對象，格式為：{text:'顯示文本',value:'選中后的值',disabled:'是否禁用'}modeStringdefault設(shè)置顯示模式，有效值為default（橫向顯示）、list（列表顯示）、button（按鈕顯示）和tag（標簽顯示）multipleBooleanfalse設(shè)置是否多選minString/Number

設(shè)置多選時最小選擇個數(shù)，multiple為true時生效maxString/Number

設(shè)置多選時最大選擇個數(shù)，multiple為true時生效wrapBoolean

設(shè)置是否換行顯示iconStringleft設(shè)置list列表模式下圖標的顯示位置selectedColorString#007aff設(shè)置選中顏色selectedTextColorString#333設(shè)置選中文本顏色@changeEventHandle

選中狀態(tài)改變時觸發(fā)change事件，可通過e.detail.data.value獲取選中的值，e.detail.data.text獲取選中的文本內(nèi)容

5.2.9uni-data-checkbox數(shù)據(jù)選擇器組件

uni-data-checkbox組件使用示例代碼。<template>

<view>

<!--單選-->

<viewclass="text">單選選中：{{JSON.stringify(radio1)}}</view>

<uni-data-checkboxv-model="radio1":localdata="sex"

@change="change"></uni-data-checkbox>

<!--多選-->

<viewclass="text">多選選中：{{JSON.stringify(checkbox1)}}</view>

<uni-data-checkboxmultiplev-model="checkbox1"

:localdata="hobby"></uni-data-checkbox>

<!--使用min，max屬性多選-->

<viewclass="text">選中：{{JSON.stringify(checkbox2)}}</view>

<uni-data-checkboxmin="1"max="2"multiple

v-model="checkbox2":localdata="hobby"></uni-data-checkbox>

<!--button模式多選-->

<viewclass="text">單選選中：{{JSON.stringify(radio2)}}</view>

<uni-data-checkboxmode="button"v-model="radio2"

:localdata="sex"></uni-data-checkbox>

</view></template><!--剩余代碼見下一頁-->

5.2.9uni-data-checkbox數(shù)據(jù)選擇器組件<scriptsetup>import{ref}from'vue';

letsex=[

{text:'男',value:0},

{text:'女',value:1},

{text:'未知',value:2},

]

let

hobby=[

{text:'足球',value:0},

{text:'籃球',value:1},

{text:'游泳',value:2},

]

letradio1=ref(0)

letradio2=ref(0)

letcheckbox1=ref([0])

letcheckbox2=ref([0])

functionchange(e){

console.log(e.detail.data.value+","+e.detail.data.text)

}</script><style></style>

5.2.9uni-data-checkbox數(shù)據(jù)選擇器組件在微信開發(fā)者工具運行效果。

5.2.10uni-data-picker級聯(lián)選擇器組件

uni-data-picker是一個級聯(lián)選擇器組件，支持單列、和多列級聯(lián)選擇，多于地址選擇、商品分類選擇等場景。使用時uni-data-picker組件沒有列數(shù)限制，如果級聯(lián)列數(shù)過多屏幕顯示不全，頂部tab區(qū)域會左右滾動。uni-data-picker組件數(shù)據(jù)源支持一次性加載完畢，也支動態(tài)加載數(shù)據(jù)。uni-data-picker級聯(lián)選擇器組件主要屬性屬性名類型默認值說明v-modelString/Number

選中的數(shù)據(jù)值localdataArray

綁定的本地數(shù)據(jù)源，數(shù)組內(nèi)每個元素是對象，格式為：{text:'顯示文本',value:'選中后的值',disabled:'是否禁用',children:[]}preloadBooleanfalse設(shè)置是否預(yù)加載數(shù)據(jù)readonlyBooleanfalse設(shè)置是否禁用clear-iconBooleantrue設(shè)置是否顯示清除按鈕ellipsisBooleantrue設(shè)置是否隱藏tab標簽過長的文本popup-titleString

設(shè)置彈出層標題@changeEventHandle

選擇完成時觸發(fā)，可通過e.detail.value獲取選中的數(shù)據(jù)，數(shù)據(jù)以多維數(shù)組存在，內(nèi)部每個元素是一個對象包含text和value屬性。text表示選中的文本，value表示選中的值@nodeclickEventHandle

節(jié)點被點擊時觸發(fā)，可通過e.text獲取選中的文本，e.value獲取選中的值@popupopenedEventHandle

彈出層彈出時觸發(fā)@popupclosed EventHandle

彈出層關(guān)閉時觸發(fā)

5.2.10uni-data-picker級聯(lián)選擇器組件

uni-data-picker使用示例代碼。<template>

<view>

<uni-data-pickerplaceholder="請選擇班級"popup-title="請選擇所在地區(qū)"

v-model="value":localdata="dataTree"@change="onChange"@nodeclick="onNodeClick"@popupopened="onPopUpOpened"@popupclosed="onPopUpClosed"></uni-data-picker>

<view>自定義插槽，循環(huán)遍歷打印顯示選中的內(nèi)容</view>

<!--自定義插槽，data為選中的數(shù)據(jù)，采用v-for循環(huán)遍歷打印顯示-->

<uni-data-pickerv-slot:default="{data,error}"popup-title="請選擇所在地區(qū)":localdata="dataTree">

<viewv-if="error"class="error">

<text>{{error}}</text>

</view>

<viewv-else-if="data.length">

<viewv-for="(item,index)indata":key="index">

<text>{{item.value}}+","+{{item.text}}</text>

</view>

</view>

<viewv-else>

<text>請選擇</text>

</view>

</uni-data-picker>

</view></template><!--剩余代碼見下一頁-->

5.2.10uni-data-picker級聯(lián)選擇器組件<scriptsetup>

import{reactive}from'vue';

letvalue="1-2"

letdataTree=reactive([

{text:"一年級",

value:"1-0",

children:[

{text:"1.1班",value:"1-1"},

{text:"1.2班",value:"1-2"},

],

},

{text:"二年級",

value:"2-0",

children:[

{text:"2.1班",value:"2-1"},

{text:"2.2班",value:"2-2"},

]

},

{text:"三年級",

value:"3-0",

disable:true

},

])//剩余代碼見下一頁

5.2.10uni-data-picker級聯(lián)選擇器組件

functiononNodeClick(e){

console.log('NodeClick:',e.text+","+e.value);

}

functiononPopUpOpened(e){

console.log('PopUpOpened');

}

functiononPopUpClosed(e){

console.log('PopUpClosed');

}

functiononChange(e){

console.log('Change:',e.detail.value[0]+","+e.detail.value[1]);

}</script><style></style>

5.2.10uni-data-picker級聯(lián)選擇器組件在微信開發(fā)者工具運行效果。

5.2.11uni-data-select下拉框組件

uni-data-select下拉框組件用于選項過多時，通過下拉菜單展示并選擇內(nèi)容。uni-data-select組件提供數(shù)據(jù)綁定功能和自動表單校驗功能，能夠減少開發(fā)人員代碼量。uni-data-select下拉框組件主要屬性屬性名類型默認值說明value/v-modelString/Number

選中的數(shù)據(jù)值（當其值為0時不進行初始化賦值）localdataArray

綁定的本地數(shù)據(jù)源，數(shù)組內(nèi)每個元素是對象，格式為：{text:'顯示文本',value:'選中后的值',disabled:'是否禁用'}clearBoolean

設(shè)置是否可以清空已選項labelString

設(shè)置左側(cè)標題placeholderString請選擇設(shè)置輸入框的提示文字placementStringbottom設(shè)置下拉框彈出時位置，有效值為bottom和top@changeEventHandle

選擇完成時觸發(fā)，可通過event獲取選中的value值

5.2.11uni-data-select下拉框組件

uni-data-select使用示例代碼。<template>

<view>

<uni-data-selectv-model="value":localdata="range"@change="change"/>

</view></template><scriptsetup>

import{reactive}from'vue';

letvalue=0

letrange=reactive([

{value:0,text:"籃球"},

{value:1,text:"足球"},

{value:2,text:"游泳"},

])

functionchange(e){

console.log(e)

}</script><style></style>

5.2.11uni-data-select下拉框組件在微信開發(fā)者工具運行效果。

5.2.12uni-datetime-picker日期選擇器組件

uni-datetime-picker組件是一個日期+時間范圍的選擇器，支持時間戳輸入和輸出。使用時uni-datetime-picker組件必須同時選擇日期和時間。如果只需要單獨選擇日期或時間，又不需要時間戳輸入和輸出，可使用原生的picker日期選擇器。uni-datetime-picker組件屬性較多，這里不一一列舉。

uni-datetime-picker組件使用示例代碼如下。<template>

<view>

<view>選中的日期：{{date}}</view>

<uni-datetime-pickertype="date":clear-icon="false"v-model="date"/>

<view>選中的日期時間：{{dateTime}}</view>

<uni-datetime-pickertype="datetime"v-model="dateTime"@change="changeLog"/>

<view>選中的日期范圍：{{dateRange}}</view>

<uni-datetime-pickerv-model="dateRange"type="daterange"/>

<view>選中的日期時間范圍：{{dateTimeRange}}</view>

<uni-datetime-pickerv-model="dateTimeRange"type="datetimerange"rangeSeparator="至"/>

<view>選中的時間戳：{{dateTimeStamp}}</view>

<uni-datetime-pickerreturnType="timestamp"v-model="dateTimeStamp"@change="changeLog"/>

<view>選中的時間以Date對象形式返回：{{dateTimeSingle}}</view>

<uni-datetime-pickertype="datetime"returnType="date"v-model="dateTimeSingle"@change="changeLog"/><!--剩余代碼見下一頁-->

5.2.12uni-datetime-picker日期選擇器組件

<view>插槽選中的日期：{{dateSlot}}</view>

<uni-datetime-pickerv-model="dateSlot">點擊插槽</uni-datetime-picker>

</view></template><scriptsetup>

import{ref}from'vue';

letdate=ref("2024-02-12")

letdateTime=ref("2024-02-120:01:10")

letdateRange=ref(["2024-02-12","2024-03-12"])

letdateTimeRange=ref(["2024-02-080:01:10","2024-03-0823:59:59"])

letdateTimeStamp=ref(Date.now()-2*24*3600*1000)

letdateTimeSingle=ref(newDate())

letdateSlot=ref("2024-02-12")

functionchangeLog(e){

console.log('change事件:',e);

}</script><style></style>

5.2.12uni-datetime-picker日期選擇器組件在微信開發(fā)者工具運行效果。

5.2.13uni-drawer抽屜組件uni-drawer抽屜組件用于在頁面左側(cè)或右側(cè)實現(xiàn)側(cè)滑菜單功能。

uni-drawer組件主要屬性屬性名類型默認值說明maskBooleantrue設(shè)置是否顯示遮罩maskClickBooleantrue設(shè)置點擊遮罩是否可以關(guān)閉抽屜modeStringleft設(shè)置抽屜滑出位置，有效值為left（從左側(cè)滑出）和right（從右側(cè)滑出）widthNumber220設(shè)置抽屜寬度，僅vue頁面設(shè)置生效@changeEventHandle

抽屜狀態(tài)發(fā)生變化時觸發(fā)事件。可獲取抽屜狀態(tài)，值為true（抽屜已經(jīng)打開）和false（抽屜已經(jīng)關(guān)閉）

5.2.13uni-drawer抽屜組件uni-drawer抽屜組件使用示例代碼。<template>

<view>

<buttontype="primary"@click="showDrawer('left')">左側(cè)滑出</button>

<uni-drawerref="showLeft"mode="left":width="320"

@change="change($event,'left')">

<button@click="closeDrawer('left')">關(guān)閉Drawer</button>

</uni-drawer>

<buttontype="primary"@click="showDrawer('right')">右側(cè)滑出</button>

<uni-drawerref="showRight"mode="right"

@change="change($event,'right')">

<scroll-viewclass="scroll-view-box"scroll-y="true">

<button@click="closeDrawer('right')">關(guān)閉Drawer</button>

<viewclass="info-content"v-for="itemin50":key="item">

<text>可滾動內(nèi)容{{item}}</text>

</view>

</scroll-view>

</uni-drawer>

</view></template><!--剩余代碼見下一頁-->

5.2.13uni-drawer抽屜組件<scriptsetup>

import{getCurrentInstance}from'vue';

const{proxy}=getCurrentInstance()//獲取當前頁面組件實例

functionshowDrawer(str){

if(str=='showLeft'){

//通過ref屬性獲取uni-drawer實例并調(diào)用open方法

proxy.$refs.showLeft.open()

}else{

proxy.$refs.showRight.open()

}

}

functionchange(e,str){

console.log(e)

console.log(str)

}

functioncloseDrawer(str){

if(str=='showLeft'){

proxy.$refs.showLeft.close()

}else{

proxy.$refs.showRight.close()

}

}</script><!--剩余代碼見下一頁-->

5.2.13uni-drawer抽屜組件<stylescoped> .scroll-view-box{ flex:1; position:absolute; top:0; right:0; bottom:0; left:0; }</style>在微信開發(fā)者工具運行效果。

5.2.14uni-easyinput增強輸入框組件

uni-easyinput組件是對原生input組件的增強，是專門為配合表單組件uni-forms而設(shè)計的。uni-easyinput組件內(nèi)置了邊框，圖標等，同時包含了input組件的所有功能。uni-easyinput組件的屬性較多，這里不一一列舉。

uni-easyinput組件使用示例