uni-app移動應(yīng)用開發(fā)課件 4-uni-app組件1

移動應(yīng)用

開發(fā)UniAppuni-app組件第

四

章本章主要講解uni-app的常用組件，包括view組件、scroll-view組件、swiper組件、text組件、rich-text組件、button組件、radio組件、input組件、picker組件、switch組件、map組件等。通過本章的學(xué)習(xí)，大家能夠使用uni-app的常用組件進行開發(fā)。本章導(dǎo)讀學(xué)習(xí)目標

知識目標1.掌握uni-app的常用組件的屬性2.掌握uni-app的常用組件的事件能力目標1.具有靈活使用常用組件搭建頁面的能力2.具有熟練使用組件的常用屬性的能力

素質(zhì)目標1.具有良好的軟件編碼規(guī)范素養(yǎng)2.培養(yǎng)學(xué)生技能報國的愛國主義情懷、精益求精的工匠精神3.具有較強的自主學(xué)習(xí)與鉆研精神uni-app組件知識思維導(dǎo)圖scroll-viewswiperbuttonpickerslider1.容器組件2.基礎(chǔ)組件3.表單組件4.媒體組件5.地圖6.案例典型注冊頁7.案例典型個人中心頁rich-textprogresscameravideoinputradio、checkboxformswitch容器組件第

一

節(jié)scroll-view的使用常用屬性屬性名類型默認值說明scroll-xBooleanfalse允許橫向滾動scroll-yBooleanfalse允許縱向滾動upper-thresholdNumber/String50距頂部/左邊多遠時（單位px），觸發(fā)scrolltoupper事件lower-thresholdNumber/String50距底部/右邊多遠時（單位px），觸發(fā)scrolltolower事件scroll-topNumber/String

設(shè)置豎向滾動條位置scroll-leftNumber/String

設(shè)置橫向滾動條位置scroll-into-viewString

值應(yīng)為某子元素id（id不能以數(shù)字開頭）。設(shè)置哪個方向可滾動，則在哪個方向滾動到該元素scroll-with-animationBooleanfalse在設(shè)置滾動條位置時使用動畫過渡refresher-backgroundString"#FFF"設(shè)置自定義下拉刷新區(qū)域背景顏色refresher-triggeredBooleanfalse設(shè)置當前下拉刷新狀態(tài)，true表示下拉刷新已經(jīng)被觸發(fā)，false表示下拉刷新未被觸發(fā)enable-flexBooleanfalse啟用

flexbox布局。開啟后，當前節(jié)點聲明了display:flex就會成為flexcontainer，并作用于其孩子節(jié)點。scroll-anchoringBooleanfalse開啟

scrollanchoring特性，即控制滾動位置不隨內(nèi)容變化而抖動，僅在iOS下生效，安卓下可參考CSSoverflow-anchor屬性。@scrolltoupperEventHandle

滾動到頂部/左邊，會觸發(fā)scrolltoupper事件@scrolltolowerEventHandle

滾動到底部/右邊，會觸發(fā)scrolltolower事件@scrollEventHandle

滾動時觸發(fā)，event.detail={scrollLeft,scrollTop,scrollHeight,scrollWidth,deltaX,deltaY}4.1.1scroll-view使用默認模板新建一個uni-app應(yīng)用uniappch04，本章實例將使用本項目1在項目中新建一個名為“scroll-view”的頁面并勾選“在page.json中注冊”選項。2在page.json文件中將剛創(chuàng)建頁面的“navigationBarTitleText”設(shè)為“scroll-view”。3在“scroll-view.vue”中完成如下代碼編寫.txt4scroll-view組件演示效果圖在當前頁面執(zhí)行菜單【運行】—【運行到瀏覽器】即可查看5實現(xiàn)步驟：4.1.1scroll-view4.1.2swiper常用屬性屬性名類型默認值說明indicator-dotsBooleanfalse是否顯示面板指示點indicator-colorColorrgba(0,0,0,.3)指示點顏色indicator-active-colorColor#000000當前選中的指示點顏色active-classString

swiper-item可見時的classchanging-classString

acceleration設(shè)置為true時且處于滑動過程中，中間若干屏處于可見時的classautoplayBooleanfalse是否自動切換currentNumber0當前所在滑塊的

indexintervalNumber5000自動切換時間間隔durationNumber500滑動動畫時長circularBooleanfalse是否采用銜接滑動，即播放到末尾后重新回到開頭verticalBooleanfalse滑動方向是否為縱向display-multiple-itemsNumber1同時顯示的滑塊數(shù)量4.1.2swiper實現(xiàn)步驟：在項目uniappch04中新建一個名為“swiper”的頁面并勾選“在page.json中注冊”選項。在page.json文件中將剛創(chuàng)建頁面“navigationBarTitleText”設(shè)為“swiper”。swiper的使用在“swiper.vue”中完成如下代碼編寫.txt在當前頁面執(zhí)行菜單【運行】—【運行到瀏覽器】即可查看,運行效果如圖所示基礎(chǔ)組件第

二

節(jié)4.2基礎(chǔ)組件icon圖標組件rich-text富文本組件text文本組件progress進度條組件基礎(chǔ)組件包括textprogressrich-text常用組件4.2.1rich-text屬性名類型默認值說明spacestring

顯示連續(xù)空格nodesArray/String[]節(jié)點列表/HTMLStringselectableBooleantrue富文本是否可以長按選中，可用于復(fù)制，粘貼等場景image-menu-preventBooleanfalse阻止長按圖片時彈起默認菜單（將該屬性設(shè)置為image-menu-prevent或image-menu-prevent="true"），只在初始化時有效，不能動態(tài)變更；若不想阻止彈起默認菜單，則不需要設(shè)置此屬性previewBoolean

富文本中的圖片是否可點擊預(yù)覽。在不設(shè)置的情況下，若rich-text未監(jiān)聽點擊事件，則默認開啟。未顯示設(shè)置preview時會進行點擊默認預(yù)覽判斷，建議顯示設(shè)置preview@itemclickEventHandle

攔截點擊事件（只支持a、img標簽），返回當前node信息event.detail={node}rich-text組件的屬性說明在項目uniappch04中新建一個名為“rich-text”的頁面并勾選“在page.json中注冊”選項。1在page.json文件中將剛創(chuàng)建頁面的“navigationBarTitleText”設(shè)為“rich-text”。2在“rich-text.vue”中完成如下代碼編寫.txt3在當前頁面執(zhí)行菜單【運行】—【運行到瀏覽器】即可查看，運行效果如圖所示。4實現(xiàn)步驟：4.2.1rich-text4.2.2progress屬性名類型默認值說明percentNumber無百分比0~100show-infoBooleanfalse在進度條右側(cè)顯示百分比border-radiusNumber/String0圓角大小font-sizeNumber/String16右側(cè)百分比字體大小stroke-widthNumber6進度條線的寬度，單位pxactiveColorColor#09BB07已選擇的進度條的顏色backgroundColorColor#EBEBEB未選擇的進度條的顏色activeBooleanfalse進度條從左往右的動畫active-modeStringbackwardsbackwards:動畫從頭播；forwards：動畫從上次結(jié)束點接著播durationNumber30進度增加1%所需毫秒數(shù)@activeendEventHandle

動畫完成事件progress組件的屬性說明在項目uniappch04中新建一個名為“progress”的頁面并勾選“在page.json中注冊”選項在page.json文件中將剛創(chuàng)建頁面的“navigationBarTitleText”設(shè)為“progress”在“progress.vue”中完成如下代碼編寫.txt在當前頁面執(zhí)行菜單【運行】—【運行到瀏覽器】即可查看Progress組件演示效果圖progress的使用實現(xiàn)步驟：4.2.2progress表單組件第

三

節(jié)4.3 表單組件button按鈕組件radio單選項組件checkbox多選項組件form表單組件input單行輸入組件switch開關(guān)選擇器組件textarea多行輸入組件4.3.1button屬性類型默認值說明sizeStringdefault按鈕的大小typeStringdefault按鈕的樣式類型plainBooleanfalse按鈕是否鏤空，背景色透明disabledBooleanfalse是否禁用loadingBooleanfalse名稱前是否帶

loading圖標form-typeString

用于

<form>組件，點擊分別會觸發(fā)<form>組件的submit/reset事件open-typeString

開放能力hover-classStringbutton-hover指定按鈕按下去的樣式類。當

hover-class="none"時，沒有點擊態(tài)效果hover-start-timeNumber20按住后多久出現(xiàn)點擊態(tài)，單位毫秒hover-stay-timeNumber70手指松開后點擊態(tài)保留時間，單位毫秒常用屬性4.3.1button值說明default默認大小mini小尺寸type屬性有效值說明值說明primary微信小程序、360小程序為綠色，App、H5、百度小程序、支付寶小程序、飛書小程序、快應(yīng)用為藍色，字節(jié)跳動小程序為紅色，QQ小程序為淺藍色。如想在多端統(tǒng)一顏色，請改用default，然后自行寫樣式default白色warn紅色size屬性說明4.3.1button實現(xiàn)步驟：在項目uniappch04中新建一個名為“button”的頁面并勾選“在page.json中注冊”選項。在page.json文件中將剛創(chuàng)建頁面的“navigationBarTitleText”設(shè)為“button”。button的使用在“button.vue”中完成如下代碼編寫.txt在當前頁面執(zhí)行菜單【運行】—【運行到瀏覽器】即可查看，運行效果如圖所示4.3.3picker屬性名類型默認值說明rangeArray/Array<Object>[]mode為selector或multiSelector時，range有效range-keyString

當range是一個Array＜Object＞時，通過range-key來指定Object中key的值作為選擇器顯示內(nèi)容valueNumber0value的值表示選擇了range中的第幾個（下標從0開始）selector-typeStringauto大屏?xí)rUI類型，支持picker、select、auto，默認在iPad以picker樣式展示而在PC以select樣式展示disabledBooleanfalse是否禁用@changeEventHandle

value改變時觸發(fā)change事件，event.detail={value:value}@cancelEventHandle

取消選擇或點遮罩層收起picker時觸發(fā)普通選擇器的屬性說明4.3.3picker屬性名類型默認值說明range二維Array或二維Array＜Object＞[]mode為selector或multiSelector時，range有效。二維數(shù)組，長度表示多少列，數(shù)組的每項表示每列的數(shù)據(jù)，如[["a","b"],["c","d"]]range-keyString

當range是一個二維Array＜Object＞時，通過range-key來指定Object中key的值作為選擇器顯示內(nèi)容valueArray[]value每一項的值表示選擇了range對應(yīng)項中的第幾個（下標從0開始）@changeEventHandle

value改變時觸發(fā)change事件，event.detail={value:value}@columnchangeEventHandle

某一列的值改變時觸發(fā)columnchange事件，event.detail={column:column,value:value}，column的值表示改變了第幾列（下標從0開始），value的值表示變更值的下標@cancelEventHandle

取消選擇時觸發(fā)（快手小程序不支持）disabledBooleanfalse是否禁用（快手小程序不支持）多列選擇器的屬性說明4.3.3picker屬性名類型默認值說明valueString

表示選中的時間，格式為"hh:mm"startString

表示有效時間范圍的開始，字符串格式為"hh:mm"endString

表示有效時間范圍的結(jié)束，字符串格式為"hh:mm"@changeEventHandle

value改變時觸發(fā)change事件，event.detail={value:value}@cancelEventHandle

取消選擇時觸發(fā)disabledBooleanfalse是否禁用valueString

表示選中的時間，格式為"hh:mm"時間選擇器的屬性說明4.3.3picker屬性名類型默認值說明valueString0表示選中的日期，格式為"YYYY-MM-DD"startString

表示有效日期范圍的開始，字符串格式為"YYYY-MM-DD"endString

表示有效日期范圍的結(jié)束，字符串格式為"YYYY-MM-DD"fieldsStringday有效值year、month、day，表示選擇器的粒度，默認為day，App端未配置此項時使用系統(tǒng)UI@changeEventHandle

value改變時觸發(fā)change事件，event.detail={value:value}@cancelEventHandle

取消選擇時觸發(fā)disabledBooleanfalse是否禁用valueString0表示選中的日期，格式為"YYYY-MM-DD"日期選擇器的屬性說明4.3.3picker屬性名類型默認值說明valueArray[]表示選中的省市區(qū)，默認選中每一列的第一個值custom-itemString

可為每一列的頂部添加一個自定義的項@changeEventHandle

value改變時觸發(fā)change事件，event.detail={value:value}@cancelEventHandle

取消選擇時觸發(fā)disabledBooleanfalse是否禁用省區(qū)市選擇器的屬性說明在項目uniappch04中新建一個名為“picker”的頁面并勾選“在page.json中注冊”選項1在page.json文件中將剛創(chuàng)建頁面的“navigationBarTitleText”設(shè)為“picker”2在“picker.vue”中完成如下代碼編寫.txt3在當前頁面執(zhí)行菜單【運行】—【運行到瀏覽器】即可查看，運行效果如圖所示4picker的使用實現(xiàn)步驟：4.3.3picker4.3.4slider常用屬性說明屬性名類型默認值說明minNumber0最小值maxNumber100最大值stepNumber1步長，取值必須大于0，并且可被(max-min)整除disabledBooleanfalse是否禁用valueNumber0當前取值activeColorColor

滑塊左側(cè)已選擇部分的線條顏色backgroundColorColor#e9e9e9滑塊右側(cè)背景條的顏色block-sizeNumber28滑塊的大小，取值范圍為12-28block-colorColor#ffffff滑塊的顏色show-valueBooleanfalse是否顯示當前value@changeEventHandle

完成一次拖動后觸發(fā)的事件，event.detail={value:value}@changingEventHandle

拖動過程中觸發(fā)的事件，event.detail={value:value}slider（滑動選擇器）經(jīng)常在控制聲音大，屏幕亮度等場景中使用，它可以對滑動步長、最大值、最小值等進行設(shè)置。在項目uniappch04中新建一個名為“slider”的頁面并勾選“在page.json中注冊”選項。在page.json文件中將剛創(chuàng)建頁面的“navigationBarTitleText”設(shè)為“slider”在“slider.vue”中完成如下代碼編寫.txt當前頁面執(zhí)行菜單【運行】—【運行到瀏覽器】即可查看Slider組件演示效果圖slider的使用實現(xiàn)步驟：4.3.4slider4.3.5input常用屬性說明屬性名類型默認值說明valueString

輸入框的初始內(nèi)容typeStringtextinput的類型passwordBooleanfalse是否是密碼類型placeholderString

輸入框為空時占位符placeholder-styleString

指定

placeholder的樣式disabledBooleanfalse是否禁用maxlengthNumber140最大輸入長度，設(shè)置為

-1的時候不限制最大長度focusBooleanfalse獲取焦點。@inputEventHandle

當鍵盤輸入時，觸發(fā)input事件，event.detail={value}@focusEventHandle

輸入框聚焦時觸發(fā)，event.detail={value,height}，height為鍵盤高度@blurEventHandle

輸入框失去焦點時觸發(fā)，event.detail={value:value}@confirmEventHandle

點擊完成按鈕時觸發(fā)，event.detail={value:value}input（輸入框）用來輸入單行文本內(nèi)容，它的功能非常強大，使用方式與傳統(tǒng)H5的input相似，同樣支持v-model。4.3.5input實現(xiàn)步驟：在項目uniappch04中新建一個名為“input”的頁面并勾選“在page.json中注冊”選項。在page.json文件中將剛創(chuàng)建頁面的“navigationBarTitleText”設(shè)為“input”。input的使用\在“input.vue”中完成如下代碼編寫.txt在當前頁面執(zhí)行菜單【運行】—【運行到瀏覽器】即可查看，運行效果如圖所示4.3.6radio和checkbox屬性名類型默認值說明@changeEventHandle

<radio-group>中的選中項發(fā)生變化時觸發(fā)change事件，event.detail={value:選中項radio的value}valueString

<radio>標識。當該<radio>選中時，<radio-group>的change事件會攜帶<radio>的valuecheckedBooleanfalse當前是否選中disabledBooleanfalse是否禁用colorColor

radio的顏色，同css的colorradio組件的屬性說明4.3.6radio和checkbox屬性名類型默認值說明@changeEventHandle

<checkbox-group>中選中項發(fā)生改變是觸發(fā)change事件，detail={value:[選中的checkbox的value的數(shù)組]}valueString

<checkbox>標識，選中時觸發(fā)<checkbox-group>的change事件，并攜帶<checkbox>的value。disabledBooleanfalse是否禁用checkedBooleanfalse當前是否選中，可用來設(shè)置默認選中colorColor

checkbox的顏色，同css的colorcheckbox組件的屬性說明radio和checkbox的使用在項目uniappch04中新建一個名為“radio&checkbox”的頁面并勾選“在page.json中注冊”選項。在page.json文件中將剛創(chuàng)建頁面的“navigationBarTitleText”設(shè)為“radio&checkbox”在“radio&checkbox.vue”中完成如下代碼編寫.txt在當前頁面執(zhí)行菜單【運行】—【運行到瀏覽器】即可查看演示效果圖實現(xiàn)步驟：4.3.6radio和checkbox4.3.8switchrswitch組件的屬性說明屬性名類型默認值說明checkedBooleanfalse是否選中disabledBooleanfalse是否禁用typeStringswitch樣式，有效值：switch,checkboxcolorColor

switch的顏色，同css的color@changeEventHandle

checked改變時觸發(fā)change事件，event.detail={value:checked}switch(開關(guān)選擇器）在實際開發(fā)中經(jīng)常使用，如是否顯示密碼、是否打包、知否通知、是夠使用余額等場景。switch的使用實現(xiàn)步驟：在項目uniappch04中新建一個名為“switch”的頁面并勾選“在page.json中注冊”選項。在page.json文件中將剛創(chuàng)建頁面的“navigationBarTitleText”設(shè)為“switch”。在“switch.vue”中完成如下代碼編寫.txt在當前頁面執(zhí)行菜單【運行】—【運行到瀏覽器】即可查看演示效果圖4.3.8switchtextarea的使用實現(xiàn)步驟：在項目uniappch04中新建一個名為“textarea”的頁面并勾選“在page.json中注冊”選項。在page.json文件中將剛創(chuàng)建頁面的“navigationBarTitleText”設(shè)為“textarea”。在“textarea.vue”中完成如下代碼編寫.txt在當前頁面執(zhí)行菜單【運行】—【運行到瀏覽器】即可查看演示效果圖4.3.9textareatextarea(多行輸入框）是與input（單行輸入框）對應(yīng)的組件，它的使用方法與傳統(tǒng)的H5的textarea的使用方法類似，實際開發(fā)中經(jīng)常應(yīng)用于填寫備注、個人介紹場景等。其常用屬性與input類似。4.3.10formform組件的屬性說明屬性名類型說明report-submitBoolean是否返回formId用于發(fā)送模板消息report-submit-timeoutnumber等待一段時間（毫秒數(shù)）以確認formId是否生效。如果未指定這個參數(shù)，formId有很小的概率是無效的（如遇到網(wǎng)絡(luò)失敗的情況）。指定這個參數(shù)將可以檢測formId是否有效，以這個參數(shù)的時間作為這項檢測的超時時間。如果失敗，將返回requestFormId:fail開頭的formId@submitEventHandle攜帶form中的數(shù)據(jù)觸發(fā)submit事件，event.detail={value:{'name':'value'},formId:''}，report-submit為true時才會返回formId@resetEventHandle表單重置時會觸發(fā)reset事件form（表單組件）將組件內(nèi)的用戶輸入的<switch><input><checkbox><slider><radio><picker>提交。在項目uniappch04中新建一個名為“form”的頁面并勾選“在page.json中注冊”選項。1在page.json文件中將剛創(chuàng)建頁面的“navigationBarTitleText”設(shè)為“form”。2在“form.vue”中完成如下代碼編寫.txt3在當前頁面執(zhí)行菜單【運行】—【運行到瀏覽器】即可查看，運行效果如圖所示4form的使用實現(xiàn)步驟：4.3.10form媒體組件第

四

節(jié)4.4.1cameracamera組件的屬性說明屬性名類型默認值說明modeStringnormal有效值為normal,scanCoderesolutionstringmedium分辨率，不支持動態(tài)修改device-positionStringback前置或后置攝像頭，值為front,backflashStringauto閃光燈，值為auto,on,offframe-sizestringmedium指定期望的相機幀數(shù)據(jù)尺寸@stopEventHandle

攝像頭在非正常終止時觸發(fā)，如退出后臺等情況@errorEventHandle

用戶不允許使用攝像頭時觸發(fā)@initdoneeventhandle

相機初始化完成時觸發(fā)，e.detail={maxZoom}@scancodeEventHandle

在掃碼識別成功時觸發(fā)，僅在mode="scanCode"時生效4.4.1camera<template> <view><cameradevice-position="back"flash="off"@error="error"style="width:100%;height:300px;"></camera><buttontype="primary"@click="takePhoto">拍照</button><view>預(yù)覽</view><imagemode="widthFix":src="src"></image></view></template><script> exportdefault{ data(){ return{ src:"" } }, methods:{ takePhoto(){ constctx=uni.createCameraContext(); ctx.takePhoto({ quality:'high', success:(res)=>{ this.src=res.tempImagePath } }); }, error(e){ console.log(e.detail); } } }</script>4.4.2videovideo組件的屬性說明屬性名類型默認值說明srcString

要播放視頻的資源地址autoplayBooleanfalse是否自動播放loopBooleanfalse是否循環(huán)播放mutedBooleanfalse是否靜音播放durationNumber

指定視頻時長，單位為秒（s）。controlsBooleantrue是否顯示默認播放控件（播放/暫停按鈕、播放進度、時間）danmu-listObjectArray

彈幕列表danmu-btnBooleanfalse是否