第4章小程序組件-Part1組件，有時(shí)也稱為標(biāo)簽，是開發(fā)微信小程序的頁(yè)面必備的基礎(chǔ)元素。微信框架為開發(fā)者提供了一系列基礎(chǔ)組件，開發(fā)者通過(guò)組合這些基礎(chǔ)組件可以快速開發(fā)微信小程序頁(yè)面。微信框架提供的組件包括基礎(chǔ)組件、容器組件、表單組件、多媒體組件、網(wǎng)絡(luò)組件等。本章對(duì)微信基礎(chǔ)組件進(jìn)行介紹。目錄4.1組件基本屬性4.2常用組件4.3表單組件4.4條件渲染和列表渲染4.5全局頁(yè)面的下拉刷新和上拉加載4.6案例：簡(jiǎn)單計(jì)算器4.7練習(xí)：你點(diǎn)我應(yīng)4.1組件基本屬性類似于HTML頁(yè)面標(biāo)簽組件都具有屬性，微信框架提供的組件也具有可以設(shè)置的屬性。雖然不同的微信組件具有不盡相同的屬性，但是微信提供的所有組件都具有下表所示的公共屬性：序號(hào)屬性名類型描述備注1idString組件的唯一標(biāo)示保持整個(gè)頁(yè)面唯一2classString組件的樣式類在對(duì)應(yīng)的WXSS中定義的樣式類3styleString組件的內(nèi)聯(lián)樣式可以動(dòng)態(tài)設(shè)置的內(nèi)聯(lián)樣式4hiddenBoolean組件是否顯示所有組件默認(rèn)顯示5data-*Any自定義屬性組件上觸發(fā)的事件時(shí)，會(huì)發(fā)送給事件處理函數(shù)6bind*/catch*Function組件的事件處理函數(shù)詳見地3章對(duì)事件系統(tǒng)的介紹4.2常用組件微信常用組件包括：view組件、button組件、icon組件、text組件、image組件、progress組件等4.2.1view組件view組件無(wú)疑是微信最常用的組件，它類似于HTML的div標(biāo)簽，代表頁(yè)面上的一塊顯示區(qū)域，在其中可以放置其他的組件，當(dāng)然也包括view組件，也就是說(shuō)，view組件時(shí)可以嵌套的。view組件除了具有公共屬性外，還具有下表所示的屬性。序號(hào)屬性名類型默認(rèn)值必填說(shuō)明1hover-classstringnone否按下時(shí)的樣式類。當(dāng)hover-class="none"時(shí)，沒有點(diǎn)擊態(tài)效果。2hover-stop-propagationbooleanfalse否是否阻止本節(jié)點(diǎn)的祖先節(jié)點(diǎn)出現(xiàn)點(diǎn)擊態(tài)3hover-start-timenumber50否按住后多久出現(xiàn)點(diǎn)擊態(tài)，單位毫秒4hover-stay-timenumber400否手指松開后點(diǎn)擊態(tài)保留時(shí)間，單位毫秒舉一個(gè)例子說(shuō)明view組件的使用。在這個(gè)例子中，一個(gè)外層的view嵌套了一個(gè)內(nèi)層view，在內(nèi)層view上設(shè)置一些屬性，觀察view被點(diǎn)擊時(shí)的效果。為此，創(chuàng)建名稱為mini-ch04-01的小程序工程，修改index.wxss文件為如下內(nèi)容：/**index.wxss**/page{height:100vh;display:flex;flex-direction:column;}.outer{height:100%;width:100%;background-color:bisque;}.inner{height:50%;width:100%;margin-top:200rpx;background-color:burlywood;}.hover1{background-color:black;}.hover2{background-color:whitesmoke;}修改index.wxml文件為如下內(nèi)容：<!--index.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><viewclass="outer"hover-class="hover1"><viewclass="inner"hover-class="hover2"hover-stop-propagation="{{false}}"hover-start-time="500"hover-stay-time="5000"></view></view>運(yùn)行這個(gè)程序，顯示如圖4-1所示的頁(yè)面，在頁(yè)面上點(diǎn)擊內(nèi)層view組件，在500毫秒后將在內(nèi)層view組件顯示hover2的樣式，同時(shí)這個(gè)點(diǎn)擊將傳播到外層view，因此，外層view將顯示hover1的樣式.4.2.2button組件按鈕是應(yīng)用程序中最常用的組件之一，與HTML中的按鈕組件相比，微信小程序中的按鈕具有更多的特性。小程序的button組件常用屬性如表.序號(hào)屬性名類型默認(rèn)值必填說(shuō)明1sizestringdefault否按鈕的大小?？蛇x值：default，默認(rèn)尺寸；mini，小尺寸。2typestringdefault否按鈕的樣式類型。可選值：primary，綠色；default，白色；warn，紅色。3plainbooleanfalse否按鈕是否鏤空，背景色透明。4disabledbooleanfalse否是否禁用5loadingbooleanfalse否名稱前是否帶loading圖標(biāo)6form-typestring無(wú)否用于form組件，點(diǎn)擊分別會(huì)觸發(fā)form組件的submit/reset事件?？蛇x值：submit，提交表單；reset，重置表單。7open-type string無(wú)否微信開放能力。后續(xù)在介紹微信API時(shí)再詳細(xì)說(shuō)明?？蛇x值：contact、getUserInfo、getPhoneNumber、share、openSetting、feedback、chooseAvatar等8hover-classstringnone否按下時(shí)的樣式類。當(dāng)hover-class="none"時(shí)，沒有點(diǎn)擊態(tài)效果。9hover-stop-propagationbooleanfalse否是否阻止本節(jié)點(diǎn)的祖先節(jié)點(diǎn)出現(xiàn)點(diǎn)擊態(tài)10hover-start-timenumber50否按住后多久出現(xiàn)點(diǎn)擊態(tài)，單位毫秒11hover-stay-timenumber400否手指松開后點(diǎn)擊態(tài)保留時(shí)間，單位毫秒12langstringen否指定返回用戶信息的語(yǔ)言，可選值：zh_CN簡(jiǎn)體中文，zh_TW，繁體中文，en，英文。舉一個(gè)簡(jiǎn)單的例子樣式button組件的使用。在這個(gè)例子，在首頁(yè)面顯示了多個(gè)不同屬性的button組件。為此，在項(xiàng)目mini-ch04-01的工程中，新建一個(gè)名稱為buttons的頁(yè)面，修改app.json，并設(shè)置buttons頁(yè)面為啟動(dòng)頁(yè)面。修改app.json為如下內(nèi)容：{"pages":["pages/index/index","pages/buttons/buttons"],"entryPagePath":"pages/buttons/buttons","window":{"navigationBarTextStyle":"black","navigationStyle":"custom"},//……省略……修改buttons.wxss為如下內(nèi)容：/*pages/buttons/buttons.wxss*/page{height:100vh;display:flex;flex-direction:column;}button{margin-top:10rpx;margin-bottom:10rpx;}修改buttons.json為如下內(nèi)容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}修改buttons.wxml為如下內(nèi)容：修改buttons.js內(nèi)容如下：<!s/buttons/buttons.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><buttontype="primary"loading="true">Primary</button><buttontype="primary"disabled="true">Primary</button><buttontype="default"open-type="getUserInfo"bindgetuserinfo="getUserInfo">Default</button><buttontype="default"plain="{{true}}">Default</button><buttontype="warn">Warn</button><buttontype="warn"disabled="true">Warn</button><buttontype="primary"size="mini">Mini按鈕</button><buttontype="default"size="mini">Mini按鈕</button><buttontype="warn"size="mini">Mini按鈕</button>//pages/buttons/buttons.jsPage({getUserInfo(e){console.log(e);}})運(yùn)行這個(gè)程序：4.2.3icon組件微信定義了一組常用的圖標(biāo)組件，通過(guò)icon組件標(biāo)簽即可使用，并且可以通過(guò)屬性設(shè)置圖標(biāo)類型、圖標(biāo)大小等。icon組件的屬性如表：序號(hào)屬性名類型默認(rèn)值必填說(shuō)明1typestring無(wú)是icon的類型，可選值包括：success、success_no_circle、info、warn、waiting、cancel、download、search、clear2sizenumber/string23否icon的大小，單位默認(rèn)為px，也支持傳入單位(rpx/px)和其余單位(rem等)3colorstring無(wú)否icon的顏色，同css的color4.2.4text組件用于顯示內(nèi)聯(lián)文本，其常用屬性如表所示。新增的span組件在顯示文字的同時(shí)，也可以內(nèi)聯(lián)顯示圖像，但是span組件只有在skyline渲染引擎下有效。序號(hào)屬性名類型默認(rèn)值必填說(shuō)明1user-selectbooleanfalse否文本是否可選2overflowstringvisible否文本溢出處理?？蛇x值：clip，修剪文本；fade，淡出；ellipsis，顯示省略號(hào)；visible，文本不截?cái)唷?max-linesnumber無(wú)否限制文本最大行數(shù)4spacestring無(wú)否顯示連續(xù)空格。可選值：ensp，中文字符空格一半大??；emsp，中文字符空格大??；nbsp，根據(jù)字體設(shè)置的空格大?。?decodebooleanfalse否是否解碼，也就是是否在文本中的標(biāo)簽進(jìn)行解碼處理4.2.5image組件用于顯示圖像/圖片，支持的圖像格式包括JPG、PNG、SVG、WEBP、GIF等格式。注意，svg格式不支持百分比單位。image組件常用的屬性及其含義如表：序號(hào)屬性名類型默認(rèn)值必填說(shuō)明1srcstring無(wú)否圖片資源地址2modestringscaleToFill否圖片裁剪縮放的模式。可選值：aspectFit、scaleToFill、aspectFill、widthFix、heightFix、top、bottom、center、left、right等3show-menu-by-longpressbooleanfalse否長(zhǎng)按圖片顯示發(fā)送給朋友、收藏、保存圖片、搜一搜、打開名片/前往群聊/打開小程序（若圖片中包含對(duì)應(yīng)二維碼或小程序碼）的菜單。4binderroreventhandle無(wú)否當(dāng)錯(cuò)誤發(fā)生時(shí)觸發(fā)，event.detail={errMsg}，也就是錯(cuò)誤原因。5bindloadeventhandle無(wú)否當(dāng)圖片載入完畢時(shí)觸發(fā)，event.detail={height,width}6fade-inbooleanfalse否是否漸顯，skyline渲染引擎有效7lazy-loadbooleanfalse否圖片懶加載，在即將進(jìn)入一定范圍（上下三屏）時(shí)才開始加載4.2.6progress組件進(jìn)度條組件，組件屬性的長(zhǎng)度單位默認(rèn)為px，也支持傳入長(zhǎng)度尺寸單位例如rpx、px等。progress的常用屬性如表：序號(hào)屬性名類型默認(rèn)值必填說(shuō)明1percentnumber無(wú)否百分比0~1002show-infobooleanfalse否在進(jìn)度條右側(cè)顯示百分比3border-radiusnumber/string0否進(jìn)度條轉(zhuǎn)角處圓角大小4font-sizenumber/string16否右側(cè)百分比字體大小5stroke-widthnumber/string6否進(jìn)度條線的寬度6colorstring#09BB07否進(jìn)度條顏色7activeColorstring#09BB07否已選擇的進(jìn)度條的顏色8backgroundColorstring#EBEBEB否未選擇的進(jìn)度條的顏色9activebooleanfalse否進(jìn)度條從左往右的動(dòng)畫10active-modestringbackwards否backwards:動(dòng)畫從頭播；forwards：動(dòng)畫從上次結(jié)束點(diǎn)接著播11durationnumber30否進(jìn)度增加1%所需毫秒數(shù)12bindactiveendeventhandler無(wú)否動(dòng)畫完成事件4.3表單組件與HTML頁(yè)面使用form表單采集信息類似，在小程序頁(yè)面中也經(jīng)常使用表單采集數(shù)據(jù)，因此，微信也定義了與HTML頁(yè)面類似的表單組件和表單元素組件。4.3.1form組件表單組件，在form組件中可以嵌套表單元素組件為用戶提供數(shù)據(jù)輸入，這些表單元素組件包括：button、checkbox、checkbox-group、editor、input、label、picker、radio、radio-group、slider、switch、textarea等。當(dāng)點(diǎn)擊form表單中form-type為submit的button組件時(shí)，會(huì)將表單組件中的value值進(jìn)行提交，注意，需要在表單組件中加上name屬性作為key。form組件的常用屬性如表：序號(hào)屬性名類型默認(rèn)值必填說(shuō)明1bindsubmiteventhandler無(wú)否攜帶form中的數(shù)據(jù)觸發(fā)submit事件，event.detail={value:{'name':'value'},formId:''}2bindreseteventhandler無(wú)否表單重置時(shí)會(huì)觸發(fā)reset事件3report-submitbooleanfalse否是否返回formId用于發(fā)送模板消息4report-submit-timeoutnumber0否等待一段時(shí)間（毫秒）以確認(rèn)formId是否生效。如果未指定這個(gè)參數(shù)，formId有很小的概率是無(wú)效的（如遇到網(wǎng)絡(luò)失敗的情況）。指定這個(gè)參數(shù)可以檢測(cè)formId是否有效，以這個(gè)參數(shù)的時(shí)間作為這項(xiàng)檢測(cè)的超時(shí)時(shí)間。如果失敗，將返回requestFormId:fail開頭的formId4.3.2input組件input組件用于輸入數(shù)據(jù)內(nèi)容，它無(wú)疑是最為常用的表單元素組件。input組件的常用屬性如表：序號(hào)屬性名類型默認(rèn)值必填說(shuō)明1value string無(wú)是輸入框的初始內(nèi)容2typestringtext否input的類型?？蛇x值：text，文本輸入鍵盤；numbe，數(shù)字輸入鍵盤；idcard，身份證輸入鍵盤；digit，帶小數(shù)點(diǎn)的數(shù)字鍵盤；safe-password，密碼安全輸入鍵盤；nickname，昵稱輸入鍵盤。3passwordbooleanfalse否是否是密碼類型4placeholderstring無(wú)是輸入框?yàn)榭諘r(shí)占位符5placeholder-stylestring無(wú)是指定placeholder的樣式，目前僅支持color,font-size和font-weight6disabledbooleanfalse否是否禁用7maxlengthnumber140否最大輸入長(zhǎng)度，設(shè)置為-1的時(shí)候不限制最大長(zhǎng)度8focus booleanfalse否獲取焦點(diǎn)9confirm-typestringdone否設(shè)置鍵盤右下角按鈕的文字，僅在type='text'時(shí)生效?？蛇x值：send，右下角按鈕為“發(fā)送”；search，右下角按鈕為“搜索”；next，右下角按鈕為“下一個(gè)”；go，右下角按鈕為“前往”；done，右下角按鈕為“完成”。10confirm-holdbooleanfalse否點(diǎn)擊鍵盤右下角按鈕時(shí)是否保持鍵盤不收起11bindinputeventhandle無(wú)是鍵盤輸入時(shí)觸發(fā)，event.detail={value,cursor,keyCode}，keyCode為鍵值。12bindfocuseventhandle無(wú)是輸入框聚焦時(shí)觸發(fā)，event.detail={value,height}，height為鍵盤高度。13bindblureventhandle無(wú)是輸入框失去焦點(diǎn)時(shí)觸發(fā)，event.detail={value,encryptedValue,encryptError}14bindconfirmeventhandle無(wú)是點(diǎn)擊完成按鈕時(shí)觸發(fā)，event.detail={value}4.3.3checkbox和checkbox-group組件checkbox組件和checkbox-group組件配合使用以實(shí)現(xiàn)多選功能。在checkbox-group組件中嵌套checkbox組件。checkbox-group組件的常用屬性和checkbox組件的常用屬性如表所示。序號(hào)屬性名類型默認(rèn)值必填說(shuō)明1bindchangeeventHandler無(wú)否checkbox-group中選中項(xiàng)發(fā)生改變時(shí)觸發(fā)change事件，detail={value:[選中的checkbox的value的數(shù)組]}。序號(hào)屬性名類型默認(rèn)值必填說(shuō)明1valuestring無(wú)否checkbox標(biāo)識(shí)，選中狀態(tài)發(fā)生變化時(shí)觸發(fā)checkbox-group的change事件，并攜帶checkbox的value值。2disabledbooleanfalse否是否禁用3checkedbooleanfalse否當(dāng)前是否選中，可用來(lái)設(shè)置默認(rèn)選中4colorstring#09BB07否checkbox的顏色，同css的color4.3.4radio和radio-group組件radio組件和radio-group組件配合使用以實(shí)現(xiàn)單選功能。在radio-group組件中嵌套radio組件。radio-group組件的常用屬性和radio組件的常用屬性如表所示。序號(hào)屬性名類型默認(rèn)值必填說(shuō)明1bindchangeeventHandler無(wú)否radio-group中選中項(xiàng)發(fā)生改變時(shí)觸發(fā)change事件，detail={value:[選中的radio的value的數(shù)組]}。序號(hào)屬性名類型默認(rèn)值必填說(shuō)明1valuestring無(wú)否radio標(biāo)識(shí)，選中狀態(tài)發(fā)生變化時(shí)觸發(fā)radio-group的change事件，并攜帶radio的value值。2disabledbooleanfalse否是否禁用3checkedbooleanfalse否當(dāng)前是否選中，可用來(lái)設(shè)置默認(rèn)選中4colorstring#09BB07否radio的顏色，同css的color4.3.5label組件使用label組件改進(jìn)表單組件的可用性。使用for屬性找到對(duì)應(yīng)的id，或者將控件放在該標(biāo)簽下，當(dāng)點(diǎn)擊label組件時(shí)，就會(huì)觸發(fā)對(duì)應(yīng)的控件。for優(yōu)先級(jí)高于內(nèi)部控件，內(nèi)部有多個(gè)控件的時(shí)候默認(rèn)觸發(fā)第一個(gè)控件。目前可以綁定的控件有：button,checkbox,radio,switch,input。label組件的常用屬性如表：序號(hào)屬性名類型默認(rèn)值必填說(shuō)明1forstring無(wú)否綁定控件的id4.3.6picker組件和數(shù)據(jù)雙向綁定使用picker組件可以從底部彈起的滾動(dòng)選擇器中選擇選項(xiàng)值。這是個(gè)非常常用的選擇器，可以選擇包括日期、時(shí)間、區(qū)域在內(nèi)的多種選項(xiàng)中選擇值。picker組件的常用屬性及其含義如表：序號(hào)屬性名類型默認(rèn)值必填說(shuō)明1header-textstring無(wú)否選擇器的標(biāo)題，僅安卓可用2modestringselector否選擇器類型?？蛇x值：selector，普通選擇器；multiSelector，多列選擇器；time，時(shí)間選擇器；date，日期選擇器region，省市區(qū)選擇器。3disabledbooleanfalse否是否禁用4bindcancel eventhandle無(wú)否取消選擇時(shí)觸發(fā)當(dāng)mode為selector時(shí)1rangearray/objectarray[]否mode為selector或multiSelector時(shí)，range有效2range-keystring無(wú)否當(dāng)range是一個(gè)ObjectArray時(shí)，通過(guò)range-key來(lái)指定Object中key值作為選擇器顯示內(nèi)容3valuenumber0否表示選擇了range中的第幾個(gè)（下標(biāo)從0開始）4bindchangeeventhandle無(wú)否value改變時(shí)觸發(fā)change事件，event.detail={value}當(dāng)mode為multiSelector時(shí)1rangearray/objectarray[]否mode為selector或multiSelector時(shí)，range有效2range-keystring無(wú)否當(dāng)range是一個(gè)ObjectArray時(shí)，通過(guò)range-key來(lái)指定Object中key值作為選擇器顯示內(nèi)容3valuenumber0否表示選擇了range中的第幾個(gè)（下標(biāo)從0開始）4bindchangeeventhandle無(wú)否value改變時(shí)觸發(fā)change事件，event.detail={value}5bindcolumnchangeeventhandle無(wú)否列改變時(shí)觸發(fā)當(dāng)mode為time時(shí)1valuestring無(wú)否表示選中的時(shí)間，格式為"hh:mm"2startstring無(wú)否表示有效時(shí)間范圍的開始，字符串格式為"hh:mm"3endstring無(wú)否表示有效時(shí)間范圍的結(jié)束，字符串格式為"hh:mm"4bindchangeeventhandle無(wú)否value改變時(shí)觸發(fā)change事件，event.detail={value}當(dāng)mode為date時(shí)1valuestring當(dāng)天否表示選中的日期，格式為"YYYY-MM-DD"2startstring無(wú)否表示有效日期范圍的開始，字符串格式為"YYYY-MM-DD"3endstring無(wú)否表示有效日期范圍的結(jié)束，字符串格式為"YYYY-MM-DD"4fieldsstringday否有效值year,month,day，表示選擇器的粒度5bindchangeeventhandle無(wú)否value改變時(shí)觸發(fā)change事件，event.detail={value}當(dāng)mode為region時(shí)1value array[]否表示選中的省市區(qū)，默認(rèn)選中每一列的第一個(gè)值2custom-itemstring無(wú)否可為每一列的頂部添加一個(gè)自定義的項(xiàng)3levelstringregion否選擇器層級(jí)。可選值：province，省級(jí)選擇器；city，市級(jí)選擇器；region，區(qū)級(jí)選擇器；sub-district，街道選擇器。4bindchangeeventhandle無(wú)否value改變時(shí)觸發(fā)change事件，event.detail={value,code,postcode}，其中字段code是統(tǒng)計(jì)用區(qū)劃代碼，postcode是郵政編碼舉個(gè)例子說(shuō)明picker組件的使用。這個(gè)例子要求用戶在頁(yè)面上輸入包括姓名、性別、愛好和出生日期在內(nèi)的信息，用戶點(diǎn)擊提交按鈕時(shí)在控制臺(tái)顯示用戶輸入的信息。為此，在mini-ch04-01工程中新建一個(gè)名為picker的頁(yè)面，設(shè)置picker頁(yè)面為入口頁(yè)面，并修改picker.json為如下內(nèi)容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}修改picker.wxss為如下內(nèi)容：/*pages/picker/picker.wxss*/form{height:100vh;display:flex;flex-direction:column;}.input_name{border:2pxsolidbisque;padding:4px;margin:15px;}.radio_gendar{margin:15px;}.checkbox_hobby{margin:15px;}.button_submit_reset{margin:15px;}.picker_birth{margin:15px;}修改picker.js為如下內(nèi)容：//pages/picker/picker.jsPage({data:{date:'2000-01-01'},formSubmit(e){console.log('form發(fā)生了submit事件，攜帶數(shù)據(jù)為：',e.detail.value);},formReset(){console.log('form發(fā)生了reset事件');}})修改picker.wxml文件為如下內(nèi)容：<!s/picker/picker.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><formbindsubmit="formSubmit"bindreset="formReset"><inputtype="text"name="name"value=""placeholder="請(qǐng)輸入姓名"confirm-type="done"class="input_name"/><radio-groupname="gendar"class="radio_gendar"><label><radiovalue="male"/>男</label><label><radiovalue="female"/>女</label></radio-group><checkbox-groupname="hobby"class="checkbox_hobby"><label><checkboxvalue="basketball"/>打籃球</label><label><checkboxvalue="running"/>操場(chǎng)跑步</label><label><checkboxvalue="travel"/>郊游</label></checkbox-group><pickermode="date"model:value="{{date}}"start="2015-09-01"end="2017-09-01“class="picker_birth">

出生日期:{{date}}</picker><viewclass="button_submit_reset"><buttonsize="mini"plaintype="primary"form-type="submit">提交</button><buttonsize="mini"plaintype="primary"form-type="reset"style="margin-left:100rpx;">重置</button></view></form>運(yùn)行這個(gè)程序，顯示如圖所示的界面：4.3.7picker-view和picker-view-column組件picker-view組件和picker-view-column組件結(jié)合起來(lái)使用，可以實(shí)現(xiàn)復(fù)雜的數(shù)據(jù)選擇功能：picker-view組件是滾動(dòng)選擇器，其中只可放置picker-view-column組件。picker-view組件的常用屬性及其含義分別如表所示，picker-view-column只是一個(gè)條目組件，沒有獨(dú)立屬性。序號(hào)屬性名類型默認(rèn)值必填說(shuō)明1value Array.<number>無(wú)否數(shù)組中的數(shù)字依次表示picker-view內(nèi)的picker-view-column選擇的第幾項(xiàng)（下標(biāo)從0開始）。2mask-classstring無(wú)否設(shè)置蒙層的類名3indicator-stylestring無(wú)否設(shè)置選擇器中間選中框的樣式4bindchangeeventhandle無(wú)否滾動(dòng)選擇時(shí)觸發(fā)change事件，event.detail={value}；value為數(shù)組，表示picker-view內(nèi)的picker-view-column當(dāng)前選擇的是第幾項(xiàng)（下標(biāo)從0開始）5bindpickstarteventhandle無(wú)否當(dāng)滾動(dòng)選擇開始時(shí)候觸發(fā)事件6bindpickendeventhandle無(wú)否當(dāng)滾動(dòng)選擇結(jié)束時(shí)候觸發(fā)事件7indicator-classstring無(wú)否設(shè)置選擇器中間選中框的類名8mask-style string無(wú)否設(shè)置蒙層的樣式9immediate-changebooleanfalse否是否在手指松開時(shí)立即觸發(fā)change事件。若不開啟則會(huì)在滾動(dòng)動(dòng)畫結(jié)束后觸發(fā)change事件。舉一個(gè)例子演示picker-view組件和picker-view-column組件的使用。這個(gè)例子允許用戶選擇所在城市名、區(qū)塊名和性別。為此，先在mini-ch04-01的工程中新建名為pickerview的頁(yè)面，并設(shè)置它為入口頁(yè)面，同時(shí)，新建images文件夾，在其中放置兩張能夠表示性別的圖像，然后修改pickerview.json為如下內(nèi)容：修改pickerview.wxss文件為如下內(nèi)容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}page{height:100vh;display:flex;flex-direction:column;}修改pickerview.js為如下內(nèi)容：//pages/pickerview/pickerview.jsPage({data:{citys:['廣州市','北京市','上海市','珠海市'],blocks:['商業(yè)區(qū)','高校區(qū)','工業(yè)區(qū)'],city:'廣州市',block:'商業(yè)區(qū)',male:true},bindChange(e){constval=e.detail.value;this.setData({city:this.data.citys[val[0]],block:this.data.blocks[val[1]],male:!val[2]})}})修改pickerview.wxml文件為如下內(nèi)容：<!s/pickerview/pickerview.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><viewclass="selected-date">{{city}}，{{block}}，{{male?"男":"女"}}</view><picker-viewindicator-style="height:50px;"style="width:100%;height:300px;"value="{{value}}"bindchange="bindChange"><picker-view-column><viewstyle="line-height:50px;text-align:center;">廣州市</view><viewstyle="line-height:50px;text-align:center;">北京市</view><viewstyle="line-height:50px;text-align:center;">上海市</view><viewstyle="line-height:50px;text-align:center;">珠海市</view></picker-view-column><picker-view-column><viewstyle="line-height:50px;text-align:center;">商業(yè)區(qū)</view><viewstyle="line-height:50px;text-align:center;">高校區(qū)</view><viewstyle="line-height:50px;text-align:center;">工業(yè)區(qū)</view></picker-view-column><picker-view-column><viewclass="icon-container"><imagestyle="width:48px;height:48px;"src="../../images/male.png"/></view><viewclass="icon-container"><imagestyle="width:48px;height:48px"src="../../images/female.png"/></view></picker-view-column></picker-view>運(yùn)行這個(gè)程序，顯示如圖所示的結(jié)果：4.3.8slider組件使用slider組件可以通過(guò)滑動(dòng)來(lái)選擇不同的值。slider組件的常用屬性及其含義如表所示:序號(hào)屬性名類型默認(rèn)值必填說(shuō)明1minnumber0否最小值2maxnumber100否最大值3stepnumber1否步長(zhǎng)，取值必須大于0，并且能夠整除(max-min)的值。4disabledbooleanfalse否是否禁用5value number0否當(dāng)前取值6activeColorcolor#1aad19否已選擇的顏色7backgroundColorcolor#e9e9e9否背景條的顏色8block-sizenumber28否滑塊的大小，取值范圍為12~289block-colorcolor#ffffff否滑塊的顏色10show-valuebooleanfalse否是否顯示當(dāng)前value11bindchangeeventhandle無(wú)否完成一次拖動(dòng)后觸發(fā)的事件，event.detail={value}12bindchangingeventhandle無(wú)否拖動(dòng)過(guò)程中觸發(fā)的事件，event.detail={value}4.3.9switch組件開關(guān)選擇組件，使用switch組件可以對(duì)“是/否”類型的數(shù)據(jù)進(jìn)行選擇。switch組件常用的屬性及其含義如表所示。序號(hào)屬性名類型默認(rèn)值必填說(shuō)明1checkedbooleanfalse否是否選中2disabledbooleanfalse否是否禁用3typestringswitch否樣式，有效值：switch,checkbox4colorstring#04BE02否switch的顏色，同css的color5bindchangeeventhandle無(wú)否點(diǎn)擊導(dǎo)致checked改變時(shí)會(huì)觸發(fā)change事件，event.detail={value}4.3.10textarea組件多行輸入框組件，使用textarea組件可以輸入多行文本數(shù)據(jù)。textarea組件的常用屬性如表所示。序號(hào)屬性名類型默認(rèn)值必填說(shuō)明1value string無(wú)否輸入框的內(nèi)容2placeholderstring無(wú)否輸入框?yàn)榭諘r(shí)占位符3placeholder-stylestring無(wú)否指定placeholder的樣式，目前僅支持color,font-size和font-weight4disabledbooleanfalse否是否禁用5maxlengthnumber140否最大輸入長(zhǎng)度，設(shè)置為-1的時(shí)候不限制最大長(zhǎng)度6auto-focusbooleanfalse否自動(dòng)聚焦，拉起鍵盤。7focus booleanfalse否獲取焦點(diǎn)8show-confirm-barbooleantrue否是否顯示鍵盤上方帶有”完成“按鈕那一欄9confirm-typestringreturn否設(shè)置鍵盤右下角按鈕的文字?？蛇x值：send，右下角按鈕為“發(fā)送”；search，右下角按鈕為“搜索”；next，右下角按鈕為“下一個(gè)”；go，右下角按鈕為“前往”；done，右下角按鈕為“完成”；return，右下角按鈕為“換行”。10confirm-holdbooleanfalse否點(diǎn)擊鍵盤右下角按鈕時(shí)是否保持鍵盤不收起11bindfocuseventhandle無(wú)否輸入框聚焦時(shí)觸發(fā)，event.detail={value,height}，height為鍵盤高度12bindblureventhandle無(wú)否輸入框失去焦點(diǎn)時(shí)觸發(fā)，event.detail={value,cursor}13bindinputeventhandle無(wú)否當(dāng)鍵盤輸入時(shí)，觸發(fā)input事件，event.detail={value,cursor,keyCode}，keyCode為鍵值14bindconfirmeventhandle無(wú)否點(diǎn)擊完成時(shí)，觸發(fā)confirm事件，event.detail={value:value}4.4條件渲染和列表渲染在小程序中，有時(shí)需要根據(jù)數(shù)據(jù)的存在與否或者值的不同來(lái)決定組件是否在界面上顯示出來(lái)，更有甚者，有時(shí)需要數(shù)據(jù)值的不同生成不同的組件來(lái)展示數(shù)據(jù)值。微信提供了稱為條件渲染和列表渲染來(lái)滿足這些需求。4.4.1條件渲染使用wx:if實(shí)現(xiàn)條件渲染，也就是，小程序會(huì)根據(jù)wx:if表達(dá)式值的“真/假”來(lái)決定是否將組件顯示出來(lái)?？聪旅孢@個(gè)例子：小程序會(huì)根據(jù)condition值的來(lái)決定是否顯示view組件：當(dāng)condition為true時(shí)則顯示，否則不顯示。<viewwx:if="{{condition}}">你好，世界！</view>條件渲染wx:if可以與wx:elif及wx:else配合使用，實(shí)現(xiàn)多重選擇的效果。例如，下面這個(gè)例子會(huì)根據(jù)成績(jī)的不同顯示不同的等級(jí)：如果要一次性判斷多個(gè)組件標(biāo)簽，可以使用一個(gè)<block/>標(biāo)簽將多個(gè)組件包裝起來(lái)，并在上邊使用wx:if控制屬性。例如下面的例子：<viewwx:if="{{score==100}}">完美</view><viewwx:elif="{{score>=90}}">優(yōu)秀</view><viewwx:elif="{{score>=80}}">良好</view><viewwx:elif="{{score>=70}}">較好</view><viewwx:elif="{{score>=60}}">合格</view><viewwx:else>加油</view><blockwx:if="{{condition}}"><view>你好</view><view>世界</view></block>4.4.2列表渲染在組件上使用wx:for控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)數(shù)據(jù)重復(fù)渲染該組件。為了理解wx:for的使用，先看一個(gè)簡(jiǎn)單的例子。首先在頁(yè)面的.js文件中定義一個(gè)數(shù)組對(duì)象：然后，在頁(yè)面的.wxml文件中可以使用wx:for屬性將數(shù)組數(shù)據(jù)渲染出來(lái)：Page({data:{array:[{message:'foo'},{message:'bar'},{message:'end'}]}})<viewwx:for="{{array}}">{{index}}:{{item.message}}</view>以上代碼會(huì)將array數(shù)組中的三個(gè)成員逐個(gè)取出來(lái)，并分別使用view組件對(duì)數(shù)組承運(yùn)進(jìn)行渲染，最后將生成如下WXML頁(yè)面結(jié)果：類似于blockwx:if，也可以將wx:for用在<block/>標(biāo)簽上，以渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊。例如：<view>0:foo</view><view>1:bar</view><view>2:end</view><blockwx:for="{{[1,2,3]}}"><view>{{index}}:</view><view>{{item}}</view></block>4.4.3WXML模板：template標(biāo)簽WXML提供模板標(biāo)簽template，使用template標(biāo)簽可以定義代碼片段，然后在不同的地方調(diào)用。舉一個(gè)簡(jiǎn)單的例子。假設(shè)在頁(yè)面的.js文件中定義了如下數(shù)據(jù)：Page({data:{item:{number:0,message:'hello,world',date:'2024-02-15'}}})現(xiàn)在，定義模板如下，在定義模板時(shí)使用name屬性為模板命名：然后，在需要的地方調(diào)用：其中，is屬性指明要調(diào)用的模板名，使用data屬性傳遞數(shù)據(jù)到模板中。因此，這個(gè)模板調(diào)用將產(chǎn)生如下WXML結(jié)果：<templatename="info"><view><text>{{number}}:{{message}}</text><text>Date:{{date}}</text></view></template><templateis="info"data="{{...item}}"/><view><text>0:hello,world</text><text>Date:2024-02-15</text></view>4.4.4WXML引用：import標(biāo)簽和include標(biāo)簽WXML中模板標(biāo)簽template只能完成對(duì)定義在同一個(gè)文件中的模板調(diào)用。為了引用其他文件中的WXML代碼，WXML定義了import標(biāo)簽和include標(biāo)簽。import標(biāo)簽引入目標(biāo)文件定義的template。import標(biāo)簽僅僅只是引入目標(biāo)文件中定義的template模板，而不會(huì)引入其他內(nèi)容。舉個(gè)例子。在名稱為item.wxml文件中定義了如下模板：在index.wxml中引用item.wxml，就可以使用item模板：注意，import標(biāo)簽不具有傳遞關(guān)系。<!--item.wxml--><templatename="item"><text>{{text}}</text></template><importsrc="item.wxml"/><templateis="item"data="{{text:'forbar'}}"/>include標(biāo)簽將目標(biāo)文件中除了<template/>、<wxs/>外的整個(gè)代碼引入，相當(dāng)于是拷貝到include位置。例如，有兩個(gè)WXML文件：header.wxml和footer.wxml，其內(nèi)容分別為如下內(nèi)容：然后，在index.wxml中可以使用include標(biāo)簽引用這兩個(gè)文件內(nèi)容：<!--header.wxml--><view>header</view><!--footer.wxml--><view>footer</view><!--index.wxml--><includesrc="header.wxml"/><view>body</view><includesrc="footer.wxml"/>4.5全局頁(yè)面的下拉刷新和上拉加載在編程實(shí)踐中，兩種經(jīng)常被用到的技術(shù)就是：其一，下拉刷新，也就是，當(dāng)用戶在頁(yè)面上下拉時(shí)，程序自動(dòng)加載新的數(shù)據(jù)；其二，上拉加載，也就是，當(dāng)用戶在頁(yè)面上拉時(shí)，顯示更多的數(shù)據(jù)。小程序?qū)@個(gè)需求提供了兩類支持技術(shù)：全局頁(yè)面的下拉上拉支持和局部頁(yè)面的下拉上拉支持。本節(jié)介紹小程序的全局頁(yè)面下拉刷新和上拉加載。為了實(shí)現(xiàn)小程序的全局頁(yè)面下拉刷新和上拉加載功能，需要首先在小程序的app.json或者頁(yè)面的.json文件中設(shè)置enablePullDownRefresh屬性為true，同時(shí)在頁(yè)面程序的.js文件中編寫名稱為onPullDownRefresh()函數(shù)和onReachBottom()函數(shù)的代碼。舉一個(gè)例子說(shuō)明如何實(shí)現(xiàn)全局頁(yè)面下拉刷新和上拉加載。這個(gè)例子首先顯示一組圖像，用戶可以通過(guò)下拉或者上拉以顯示更多的圖像。為此，首先在mini-ch04-01工程的images文件夾下放置9張圖像，文件名從01.jp到09.jpg，然后新建名稱為refresh的頁(yè)面，并設(shè)置refresh頁(yè)面為首頁(yè)面，如圖所示：修改refresh.json為如下內(nèi)容：修改refresh.wxss問如下內(nèi)容：{

"enablePullDownRefresh":true,"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}/*pages/refresh/refresh.wxss*/page{height:100%;display:flex;flex-direction:column;

overflow:auto;}修改refresh.wxml為如下內(nèi)容：refresh.js文件為如下：<!s/refresh/refresh.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><viewwx:for="{{images}}"style="margin:2px;"><imagesrc="{{item}}"mode="widthFix"></image></view>//pages/refresh/refresh.jsPage({data:{images:[]},onLoad(query){this.generateImages(4,true);},onPullDownRefresh(){console.log("Pulldown");this.generateImages(1,true);},onReachBottom(){console.log("Reachbottom");this.generateImages(1,false);},generateImages(num,head){letcs=[];for(leti=0;i<num;i++){lett=Math.floor(Math.random()*10);if(t>=10)t=9;if(t<=0)t=1;letc="../../images/0"+t+".jpg";cs.push(c);}if(head){cs=cs.concat(this.data.images);this.setData({images:cs});}else{this.data.images=this.data.images.concat(cs);this.setData({images:this.data.images});}}})運(yùn)行這個(gè)程序，顯示如圖所示的頁(yè)面：4.6案例：簡(jiǎn)單計(jì)算器計(jì)算器是一款非常常用的工具軟件，在很多系統(tǒng)上都作為預(yù)裝的工具存在，例如，在安卓手機(jī)上有計(jì)算器軟件，在Windows操作系統(tǒng)上也有計(jì)算器軟件等。下面開發(fā)一款簡(jiǎn)單的微信小程序計(jì)算器軟件，可以完成簡(jiǎn)單的加、減、乘、除功能。4.6.1案例目標(biāo)所開發(fā)的計(jì)算器只需完成簡(jiǎn)單的加減乘除功能。程序提供兩個(gè)輸入框，用于輸入操作數(shù)，還需要提供一個(gè)選擇框，用于選擇操作符，當(dāng)用戶點(diǎn)擊“=”按鈕時(shí)，對(duì)兩個(gè)操作數(shù)進(jìn)行相關(guān)運(yùn)算，并將結(jié)果顯示出來(lái)。4.6.2案例分析程序頁(yè)面可以布局在一個(gè)form表單組件中，在其中放置基本的表單元素組件?？梢圆捎萌鐖D4-所示的布局。4.6.3案例實(shí)施新建一個(gè)名稱為mini-ch04-02的程序工程，然后，修改頁(yè)面index.wxml文件為如下內(nèi)容：<!--index.wxml--><navigation-bartitle="簡(jiǎn)單計(jì)算器"back="{{false}}"color="black"background="#FFF"></navigation-bar><formbindsubmit="go"><inputtype="digit"name="operand01"value=""placeholder="請(qǐng)輸入第一個(gè)操作數(shù)"confirm-type="done"class="input_operand"/><radio-groupname="operation"class="radio_operation"><label><radiovalue="add"checked/>+</label><labelstyle="margin-left:20px;"><radiovalue="minus"/>-</label><labelstyle="margin-left:20px;"><radiovalue="multiple"/>×</label><labelstyle="margin-left:20px;"><radiovalue="divide"/>÷</label></radio-group><inputtype="digit"name="operand02"value=""placeholder="請(qǐng)輸入第二個(gè)操作數(shù)"confirm-type="done"class="input_operand"/><buttonsize="default"plaintype="primary"style="width:90%;"form-type="submit">=</button><inputtype="text"name="result"value="{{result}}"disabledclass="input_operand"/></form>修改index.wxss文件為如下內(nèi)容：/**index.wxss**/form{height:100vh;display:flex;flex-direction:column;}.input_operand{height:80rpx;border:2pxsolidbisque;padding:4px;margin:15px;}.radio_operation{margin:15px;}在index.js文件中編寫邏輯層代碼，如下：//index.jsPage({data:{result:''},go(e){letr=0;console.log('form發(fā)生了submit事件，攜帶數(shù)據(jù)為：',e.detail.value);switch(e.detail.value.operation){case"add":r=e.detail.value.operand01+e.detail.value.operand02;this.setData({result:r});break;case"minus":r=e.detail.value.operand01-e.detail.value.operand02;this.setData({result:r});break;case"multiple":r=e.detail.value.operand01*e.detail.value.operand02;this.setData({result:r});break;case"divide":r=e.detail.value.operand01/e.detail.value.operand02;this.setData({result:r});break;default:this.setData({result:"沒有選擇操作符！"});}}})運(yùn)行這個(gè)程序，顯示如圖所示的結(jié)果，輸入相關(guān)數(shù)據(jù)進(jìn)行運(yùn)算:4.7練習(xí)：你點(diǎn)我應(yīng)編寫一個(gè)小程序，在小程序頁(yè)面上以美觀的兩行兩列方式顯示四個(gè)按鈕，當(dāng)點(diǎn)擊其中一個(gè)按鈕時(shí)，在按鈕下方顯示一張與按鈕對(duì)應(yīng)的美觀圖像，當(dāng)點(diǎn)擊圖像時(shí)，也可以在不同的多張圖像之間切換。Q&A第5章小程序組件-Part2電子工業(yè)出版社為了設(shè)計(jì)更加便利和更加靈活的功能頁(yè)面，微信提供了一系列功能豐富的組件，例如，scroll-view滾動(dòng)組件實(shí)現(xiàn)頁(yè)面的滾動(dòng)功能，結(jié)合swiper組件和swiper-item組件可實(shí)現(xiàn)輪播圖功能等。本章對(duì)小程序中常用的復(fù)合功能組件進(jìn)行介紹。目錄5.1scroll-view滾動(dòng)組件5.2swiper和swiper-item輪播圖組5.3navigator頁(yè)面導(dǎo)航組件5.4tabBar及其使用5.5媒體組件5.6canvas畫布組件5.7自定義組件5.8案例：美食餐廳5.9練習(xí)：選修課5.1scroll-view滾動(dòng)組件scroll-view，顧名思義，就是可以滾動(dòng)的組件，這是個(gè)非常常用的小程序組件。使用豎向滾動(dòng)時(shí)，需要給scroll-view一個(gè)固定高度，一般通過(guò)WXSS設(shè)置height屬性。scroll-view的常用屬性及其含義如表：序號(hào)屬性名類型默認(rèn)值必填說(shuō)明1scroll-xbooleanfalse否允許橫向滾動(dòng)2scroll-ybooleanfalse否允許縱向滾動(dòng)3upper-thresholdnumber/string50否距頂部/左邊多遠(yuǎn)時(shí)，觸發(fā)scrolltoupper事件4lower-threshold number/string50否距底部/右邊多遠(yuǎn)時(shí)，觸發(fā)scrolltolower事件5scroll-topnumber/string無(wú)否設(shè)置豎向滾動(dòng)條位置6scroll-leftnumber/string無(wú)否設(shè)置橫向滾動(dòng)條位置7scroll-with-animationbooleanfalse否在設(shè)置滾動(dòng)條位置時(shí)使用動(dòng)畫過(guò)渡8refresher-enabledbooleanfalse否開啟自定義下拉刷新9refresher-thresholdnumber45否設(shè)置自定義下拉刷新閾值10refresher-default-stylestringblack否設(shè)置自定義下拉刷新默認(rèn)樣式，支持設(shè)置black|white|none，none表示不使用默認(rèn)樣式11refresher-backgroundstring#FFF否設(shè)置自定義下拉刷新區(qū)域背景顏色12show-scrollbarbooleantrue否滾動(dòng)條顯隱控制(同時(shí)開啟enhanced屬性后生效)13binddragstarteventhandle無(wú)否滑動(dòng)開始事件(同時(shí)開啟enhanced屬性后生效)detail{scrollTop,scrollLeft}14binddraggingeventhandle無(wú)否滑動(dòng)事件(同時(shí)開啟enhanced屬性后生效)detail{scrollTop,scrollLeft}15binddragendeventhandle無(wú)否滑動(dòng)結(jié)束事件(同時(shí)開啟enhanced屬性后生效)detail{scrollTop,scrollLeft,velocity}16bindscrolltouppereventhandle無(wú)否滾動(dòng)到頂部/左邊時(shí)觸發(fā)17bindscrolltolowereventhandle無(wú)否滾動(dòng)到底部/右邊時(shí)觸發(fā)18bindscrolleventhandle無(wú)否滾動(dòng)時(shí)觸發(fā)，event.detail={scrollLeft,scrollTop,scrollHei