微信小程序应用开发 课件 第4、5章 小程序组件

第4章小程序组件-Part1组件，有时也称为标签，是开发微信小程序的页面必备的基础元素。微信框架为开发者提供了一系列基础组件，开发者通过组合这些基础组件可以快速开发微信小程序页面。微信框架提供的组件包括基础组件、容器组件、表单组件、多媒体组件、网络组件等。本章对微信基础组件进行介绍。目录4.1组件基本属性4.2常用组件4.3表单组件4.4条件渲染和列表渲染4.5全局页面的下拉刷新和上拉加载4.6案例：简单计算器4.7练习：你点我应4.1组件基本属性类似于HTML页面标签组件都具有属性，微信框架提供的组件也具有可以设置的属性。虽然不同的微信组件具有不尽相同的属性，但是微信提供的所有组件都具有下表所示的公共属性：序号属性名类型描述备注1idString组件的唯一标示保持整个页面唯一2classString组件的样式类在对应的WXSS中定义的样式类3styleString组件的内联样式可以动态设置的内联样式4hiddenBoolean组件是否显示所有组件默认显示5data-*Any自定义属性组件上触发的事件时，会发送给事件处理函数6bind*/catch*Function组件的事件处理函数详见地3章对事件系统的介绍4.2常用组件微信常用组件包括：view组件、button组件、icon组件、text组件、image组件、progress组件等4.2.1view组件view组件无疑是微信最常用的组件，它类似于HTML的div标签，代表页面上的一块显示区域，在其中可以放置其他的组件，当然也包括view组件，也就是说，view组件时可以嵌套的。view组件除了具有公共属性外，还具有下表所示的属性。序号属性名类型默认值必填说明1hover-classstringnone否按下时的样式类。当hover-class="none"时，没有点击态效果。2hover-stop-propagationbooleanfalse否是否阻止本节点的祖先节点出现点击态3hover-start-timenumber50否按住后多久出现点击态，单位毫秒4hover-stay-timenumber400否手指松开后点击态保留时间，单位毫秒举一个例子说明view组件的使用。在这个例子中，一个外层的view嵌套了一个内层view，在内层view上设置一些属性，观察view被点击时的效果。为此，创建名称为mini-ch04-01的小程序工程，修改index.wxss文件为如下内容：/**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文件为如下内容：<!--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>运行这个程序，显示如图4-1所示的页面，在页面上点击内层view组件，在500毫秒后将在内层view组件显示hover2的样式，同时这个点击将传播到外层view，因此，外层view将显示hover1的样式.4.2.2button组件按钮是应用程序中最常用的组件之一，与HTML中的按钮组件相比，微信小程序中的按钮具有更多的特性。小程序的button组件常用属性如表.序号属性名类型默认值必填说明1sizestringdefault否按钮的大小。可选值：default，默认尺寸；mini，小尺寸。2typestringdefault否按钮的样式类型。可选值：primary，绿色；default，白色；warn，红色。3plainbooleanfalse否按钮是否镂空，背景色透明。4disabledbooleanfalse否是否禁用5loadingbooleanfalse否名称前是否带loading图标6form-typestring无否用于form组件，点击分别会触发form组件的submit/reset事件。可选值：submit，提交表单；reset，重置表单。7open-type string无否微信开放能力。后续在介绍微信API时再详细说明。可选值：contact、getUserInfo、getPhoneNumber、share、openSetting、feedback、chooseAvatar等8hover-classstringnone否按下时的样式类。当hover-class="none"时，没有点击态效果。9hover-stop-propagationbooleanfalse否是否阻止本节点的祖先节点出现点击态10hover-start-timenumber50否按住后多久出现点击态，单位毫秒11hover-stay-timenumber400否手指松开后点击态保留时间，单位毫秒12langstringen否指定返回用户信息的语言，可选值：zh_CN简体中文，zh_TW，繁体中文，en，英文。举一个简单的例子样式button组件的使用。在这个例子，在首页面显示了多个不同属性的button组件。为此，在项目mini-ch04-01的工程中，新建一个名称为buttons的页面，修改app.json，并设置buttons页面为启动页面。修改app.json为如下内容：{"pages":["pages/index/index","pages/buttons/buttons"],"entryPagePath":"pages/buttons/buttons","window":{"navigationBarTextStyle":"black","navigationStyle":"custom"},//……省略……修改buttons.wxss为如下内容：/*pages/buttons/buttons.wxss*/page{height:100vh;display:flex;flex-direction:column;}button{margin-top:10rpx;margin-bottom:10rpx;}修改buttons.json为如下内容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}修改buttons.wxml为如下内容：修改buttons.js内容如下：<!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);}})运行这个程序：4.2.3icon组件微信定义了一组常用的图标组件，通过icon组件标签即可使用，并且可以通过属性设置图标类型、图标大小等。icon组件的属性如表：序号属性名类型默认值必填说明1typestring无是icon的类型，可选值包括：success、success_no_circle、info、warn、waiting、cancel、download、search、clear2sizenumber/string23否icon的大小，单位默认为px，也支持传入单位(rpx/px)和其余单位(rem等)3colorstring无否icon的颜色，同css的color4.2.4text组件用于显示内联文本，其常用属性如表所示。新增的span组件在显示文字的同时，也可以内联显示图像，但是span组件只有在skyline渲染引擎下有效。序号属性名类型默认值必填说明1user-selectbooleanfalse否文本是否可选2overflowstringvisible否文本溢出处理。可选值：clip，修剪文本；fade，淡出；ellipsis，显示省略号；visible，文本不截断。3max-linesnumber无否限制文本最大行数4spacestring无否显示连续空格。可选值：ensp，中文字符空格一半大小；emsp，中文字符空格大小；nbsp，根据字体设置的空格大小；5decodebooleanfalse否是否解码，也就是是否在文本中的标签进行解码处理4.2.5image组件用于显示图像/图片，支持的图像格式包括JPG、PNG、SVG、WEBP、GIF等格式。注意，svg格式不支持百分比单位。image组件常用的属性及其含义如表：序号属性名类型默认值必填说明1srcstring无否图片资源地址2modestringscaleToFill否图片裁剪缩放的模式。可选值：aspectFit、scaleToFill、aspectFill、widthFix、heightFix、top、bottom、center、left、right等3show-menu-by-longpressbooleanfalse否长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。4binderroreventhandle无否当错误发生时触发，event.detail={errMsg}，也就是错误原因。5bindloadeventhandle无否当图片载入完毕时触发，event.detail={height,width}6fade-inbooleanfalse否是否渐显，skyline渲染引擎有效7lazy-loadbooleanfalse否图片懒加载，在即将进入一定范围（上下三屏）时才开始加载4.2.6progress组件进度条组件，组件属性的长度单位默认为px，也支持传入长度尺寸单位例如rpx、px等。progress的常用属性如表：序号属性名类型默认值必填说明1percentnumber无否百分比0~1002show-infobooleanfalse否在进度条右侧显示百分比3border-radiusnumber/string0否进度条转角处圆角大小4font-sizenumber/string16否右侧百分比字体大小5stroke-widthnumber/string6否进度条线的宽度6colorstring#09BB07否进度条颜色7activeColorstring#09BB07否已选择的进度条的颜色8backgroundColorstring#EBEBEB否未选择的进度条的颜色9activebooleanfalse否进度条从左往右的动画10active-modestringbackwards否backwards:动画从头播；forwards：动画从上次结束点接着播11durationnumber30否进度增加1%所需毫秒数12bindactiveendeventhandler无否动画完成事件4.3表单组件与HTML页面使用form表单采集信息类似，在小程序页面中也经常使用表单采集数据，因此，微信也定义了与HTML页面类似的表单组件和表单元素组件。4.3.1form组件表单组件，在form组件中可以嵌套表单元素组件为用户提供数据输入，这些表单元素组件包括：button、checkbox、checkbox-group、editor、input、label、picker、radio、radio-group、slider、switch、textarea等。当点击form表单中form-type为submit的button组件时，会将表单组件中的value值进行提交，注意，需要在表单组件中加上name属性作为key。form组件的常用属性如表：序号属性名类型默认值必填说明1bindsubmiteventhandler无否携带form中的数据触发submit事件，event.detail={value:{'name':'value'},formId:''}2bindreseteventhandler无否表单重置时会触发reset事件3report-submitbooleanfalse否是否返回formId用于发送模板消息4report-submit-timeoutnumber0否等待一段时间（毫秒）以确认formId是否生效。如果未指定这个参数，formId有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数可以检测formId是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回requestFormId:fail开头的formId4.3.2input组件input组件用于输入数据内容，它无疑是最为常用的表单元素组件。input组件的常用属性如表：序号属性名类型默认值必填说明1value string无是输入框的初始内容2typestringtext否input的类型。可选值：text，文本输入键盘；numbe，数字输入键盘；idcard，身份证输入键盘；digit，带小数点的数字键盘；safe-password，密码安全输入键盘；nickname，昵称输入键盘。3passwordbooleanfalse否是否是密码类型4placeholderstring无是输入框为空时占位符5placeholder-stylestring无是指定placeholder的样式，目前仅支持color,font-size和font-weight6disabledbooleanfalse否是否禁用7maxlengthnumber140否最大输入长度，设置为-1的时候不限制最大长度8focus booleanfalse否获取焦点9confirm-typestringdone否设置键盘右下角按钮的文字，仅在type='text'时生效。可选值：send，右下角按钮为“发送”；search，右下角按钮为“搜索”；next，右下角按钮为“下一个”；go，右下角按钮为“前往”；done，右下角按钮为“完成”。10confirm-holdbooleanfalse否点击键盘右下角按钮时是否保持键盘不收起11bindinputeventhandle无是键盘输入时触发，event.detail={value,cursor,keyCode}，keyCode为键值。12bindfocuseventhandle无是输入框聚焦时触发，event.detail={value,height}，height为键盘高度。13bindblureventhandle无是输入框失去焦点时触发，event.detail={value,encryptedValue,encryptError}14bindconfirmeventhandle无是点击完成按钮时触发，event.detail={value}4.3.3checkbox和checkbox-group组件checkbox组件和checkbox-group组件配合使用以实现多选功能。在checkbox-group组件中嵌套checkbox组件。checkbox-group组件的常用属性和checkbox组件的常用属性如表所示。序号属性名类型默认值必填说明1bindchangeeventHandler无否checkbox-group中选中项发生改变时触发change事件，detail={value:[选中的checkbox的value的数组]}。序号属性名类型默认值必填说明1valuestring无否checkbox标识，选中状态发生变化时触发checkbox-group的change事件，并携带checkbox的value值。2disabledbooleanfalse否是否禁用3checkedbooleanfalse否当前是否选中，可用来设置默认选中4colorstring#09BB07否checkbox的颜色，同css的color4.3.4radio和radio-group组件radio组件和radio-group组件配合使用以实现单选功能。在radio-group组件中嵌套radio组件。radio-group组件的常用属性和radio组件的常用属性如表所示。序号属性名类型默认值必填说明1bindchangeeventHandler无否radio-group中选中项发生改变时触发change事件，detail={value:[选中的radio的value的数组]}。序号属性名类型默认值必填说明1valuestring无否radio标识，选中状态发生变化时触发radio-group的change事件，并携带radio的value值。2disabledbooleanfalse否是否禁用3checkedbooleanfalse否当前是否选中，可用来设置默认选中4colorstring#09BB07否radio的颜色，同css的color4.3.5label组件使用label组件改进表单组件的可用性。使用for属性找到对应的id，或者将控件放在该标签下，当点击label组件时，就会触发对应的控件。for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。目前可以绑定的控件有：button,checkbox,radio,switch,input。label组件的常用属性如表：序号属性名类型默认值必填说明1forstring无否绑定控件的id4.3.6picker组件和数据双向绑定使用picker组件可以从底部弹起的滚动选择器中选择选项值。这是个非常常用的选择器，可以选择包括日期、时间、区域在内的多种选项中选择值。picker组件的常用属性及其含义如表：序号属性名类型默认值必填说明1header-textstring无否选择器的标题，仅安卓可用2modestringselector否选择器类型。可选值：selector，普通选择器；multiSelector，多列选择器；time，时间选择器；date，日期选择器region，省市区选择器。3disabledbooleanfalse否是否禁用4bindcancel eventhandle无否取消选择时触发当mode为selector时1rangearray/objectarray[]否mode为selector或multiSelector时，range有效2range-keystring无否当range是一个ObjectArray时，通过range-key来指定Object中key值作为选择器显示内容3valuenumber0否表示选择了range中的第几个（下标从0开始）4bindchangeeventhandle无否value改变时触发change事件，event.detail={value}当mode为multiSelector时1rangearray/objectarray[]否mode为selector或multiSelector时，range有效2range-keystring无否当range是一个ObjectArray时，通过range-key来指定Object中key值作为选择器显示内容3valuenumber0否表示选择了range中的第几个（下标从0开始）4bindchangeeventhandle无否value改变时触发change事件，event.detail={value}5bindcolumnchangeeventhandle无否列改变时触发当mode为time时1valuestring无否表示选中的时间，格式为"hh:mm"2startstring无否表示有效时间范围的开始，字符串格式为"hh:mm"3endstring无否表示有效时间范围的结束，字符串格式为"hh:mm"4bindchangeeventhandle无否value改变时触发change事件，event.detail={value}当mode为date时1valuestring当天否表示选中的日期，格式为"YYYY-MM-DD"2startstring无否表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"3endstring无否表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"4fieldsstringday否有效值year,month,day，表示选择器的粒度5bindchangeeventhandle无否value改变时触发change事件，event.detail={value}当mode为region时1value array[]否表示选中的省市区，默认选中每一列的第一个值2custom-itemstring无否可为每一列的顶部添加一个自定义的项3levelstringregion否选择器层级。可选值：province，省级选择器；city，市级选择器；region，区级选择器；sub-district，街道选择器。4bindchangeeventhandle无否value改变时触发change事件，event.detail={value,code,postcode}，其中字段code是统计用区划代码，postcode是邮政编码举个例子说明picker组件的使用。这个例子要求用户在页面上输入包括姓名、性别、爱好和出生日期在内的信息，用户点击提交按钮时在控制台显示用户输入的信息。为此，在mini-ch04-01工程中新建一个名为picker的页面，设置picker页面为入口页面，并修改picker.json为如下内容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}修改picker.wxss为如下内容：/*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为如下内容：//pages/picker/picker.jsPage({data:{date:'2000-01-01'},formSubmit(e){console.log('form发生了submit事件，携带数据为：',e.detail.value);},formReset(){console.log('form发生了reset事件');}})修改picker.wxml文件为如下内容：<!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="请输入姓名"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"/>操场跑步</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>运行这个程序，显示如图所示的界面：4.3.7picker-view和picker-view-column组件picker-view组件和picker-view-column组件结合起来使用，可以实现复杂的数据选择功能：picker-view组件是滚动选择器，其中只可放置picker-view-column组件。picker-view组件的常用属性及其含义分别如表所示，picker-view-column只是一个条目组件，没有独立属性。序号属性名类型默认值必填说明1value Array.<number>无否数组中的数字依次表示picker-view内的picker-view-column选择的第几项（下标从0开始）。2mask-classstring无否设置蒙层的类名3indicator-stylestring无否设置选择器中间选中框的样式4bindchangeeventhandle无否滚动选择时触发change事件，event.detail={value}；value为数组，表示picker-view内的picker-view-column当前选择的是第几项（下标从0开始）5bindpickstarteventhandle无否当滚动选择开始时候触发事件6bindpickendeventhandle无否当滚动选择结束时候触发事件7indicator-classstring无否设置选择器中间选中框的类名8mask-style string无否设置蒙层的样式9immediate-changebooleanfalse否是否在手指松开时立即触发change事件。若不开启则会在滚动动画结束后触发change事件。举一个例子演示picker-view组件和picker-view-column组件的使用。这个例子允许用户选择所在城市名、区块名和性别。为此，先在mini-ch04-01的工程中新建名为pickerview的页面，并设置它为入口页面，同时，新建images文件夹，在其中放置两张能够表示性别的图像，然后修改pickerview.json为如下内容：修改pickerview.wxss文件为如下内容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}page{height:100vh;display:flex;flex-direction:column;}修改pickerview.js为如下内容：//pages/pickerview/pickerview.jsPage({data:{citys:['广州市','北京市','上海市','珠海市'],blocks:['商业区','高校区','工业区'],city:'广州市',block:'商业区',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文件为如下内容：<!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;">商业区</view><viewstyle="line-height:50px;text-align:center;">高校区</view><viewstyle="line-height:50px;text-align:center;">工业区</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>运行这个程序，显示如图所示的结果：4.3.8slider组件使用slider组件可以通过滑动来选择不同的值。slider组件的常用属性及其含义如表所示:序号属性名类型默认值必填说明1minnumber0否最小值2maxnumber100否最大值3stepnumber1否步长，取值必须大于0，并且能够整除(max-min)的值。4disabledbooleanfalse否是否禁用5value number0否当前取值6activeColorcolor#1aad19否已选择的颜色7backgroundColorcolor#e9e9e9否背景条的颜色8block-sizenumber28否滑块的大小，取值范围为12~289block-colorcolor#ffffff否滑块的颜色10show-valuebooleanfalse否是否显示当前value11bindchangeeventhandle无否完成一次拖动后触发的事件，event.detail={value}12bindchangingeventhandle无否拖动过程中触发的事件，event.detail={value}4.3.9switch组件开关选择组件，使用switch组件可以对“是/否”类型的数据进行选择。switch组件常用的属性及其含义如表所示。序号属性名类型默认值必填说明1checkedbooleanfalse否是否选中2disabledbooleanfalse否是否禁用3typestringswitch否样式，有效值：switch,checkbox4colorstring#04BE02否switch的颜色，同css的color5bindchangeeventhandle无否点击导致checked改变时会触发change事件，event.detail={value}4.3.10textarea组件多行输入框组件，使用textarea组件可以输入多行文本数据。textarea组件的常用属性如表所示。序号属性名类型默认值必填说明1value string无否输入框的内容2placeholderstring无否输入框为空时占位符3placeholder-stylestring无否指定placeholder的样式，目前仅支持color,font-size和font-weight4disabledbooleanfalse否是否禁用5maxlengthnumber140否最大输入长度，设置为-1的时候不限制最大长度6auto-focusbooleanfalse否自动聚焦，拉起键盘。7focus booleanfalse否获取焦点8show-confirm-barbooleantrue否是否显示键盘上方带有”完成“按钮那一栏9confirm-typestringreturn否设置键盘右下角按钮的文字。可选值：send，右下角按钮为“发送”；search，右下角按钮为“搜索”；next，右下角按钮为“下一个”；go，右下角按钮为“前往”；done，右下角按钮为“完成”；return，右下角按钮为“换行”。10confirm-holdbooleanfalse否点击键盘右下角按钮时是否保持键盘不收起11bindfocuseventhandle无否输入框聚焦时触发，event.detail={value,height}，height为键盘高度12bindblureventhandle无否输入框失去焦点时触发，event.detail={value,cursor}13bindinputeventhandle无否当键盘输入时，触发input事件，event.detail={value,cursor,keyCode}，keyCode为键值14bindconfirmeventhandle无否点击完成时，触发confirm事件，event.detail={value:value}4.4条件渲染和列表渲染在小程序中，有时需要根据数据的存在与否或者值的不同来决定组件是否在界面上显示出来，更有甚者，有时需要数据值的不同生成不同的组件来展示数据值。微信提供了称为条件渲染和列表渲染来满足这些需求。4.4.1条件渲染使用wx:if实现条件渲染，也就是，小程序会根据wx:if表达式值的“真/假”来决定是否将组件显示出来。看下面这个例子：小程序会根据condition值的来决定是否显示view组件：当condition为true时则显示，否则不显示。<viewwx:if="{{condition}}">你好，世界！</view>条件渲染wx:if可以与wx:elif及wx:else配合使用，实现多重选择的效果。例如，下面这个例子会根据成绩的不同显示不同的等级：如果要一次性判断多个组件标签，可以使用一个<block/>标签将多个组件包装起来，并在上边使用wx:if控制属性。例如下面的例子：<viewwx:if="{{score==100}}">完美</view><viewwx:elif="{{score>=90}}">优秀</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控制属性绑定一个数组，即可使用数组中各项数据重复渲染该组件。为了理解wx:for的使用，先看一个简单的例子。首先在页面的.js文件中定义一个数组对象：然后，在页面的.wxml文件中可以使用wx:for属性将数组数据渲染出来：Page({data:{array:[{message:'foo'},{message:'bar'},{message:'end'}]}})<viewwx:for="{{array}}">{{index}}:{{item.message}}</view>以上代码会将array数组中的三个成员逐个取出来，并分别使用view组件对数组承运进行渲染，最后将生成如下WXML页面结果：类似于blockwx:if，也可以将wx:for用在<block/>标签上，以渲染一个包含多节点的结构块。例如：<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标签WXML提供模板标签template，使用template标签可以定义代码片段，然后在不同的地方调用。举一个简单的例子。假设在页面的.js文件中定义了如下数据：Page({data:{item:{number:0,message:'hello,world',date:'2024-02-15'}}})现在，定义模板如下，在定义模板时使用name属性为模板命名：然后，在需要的地方调用：其中，is属性指明要调用的模板名，使用data属性传递数据到模板中。因此，这个模板调用将产生如下WXML结果：<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标签和include标签WXML中模板标签template只能完成对定义在同一个文件中的模板调用。为了引用其他文件中的WXML代码，WXML定义了import标签和include标签。import标签引入目标文件定义的template。import标签仅仅只是引入目标文件中定义的template模板，而不会引入其他内容。举个例子。在名称为item.wxml文件中定义了如下模板：在index.wxml中引用item.wxml，就可以使用item模板：注意，import标签不具有传递关系。<!--item.wxml--><templatename="item"><text>{{text}}</text></template><importsrc="item.wxml"/><templateis="item"data="{{text:'forbar'}}"/>include标签将目标文件中除了<template/>、<wxs/>外的整个代码引入，相当于是拷贝到include位置。例如，有两个WXML文件：header.wxml和footer.wxml，其内容分别为如下内容：然后，在index.wxml中可以使用include标签引用这两个文件内容：<!--header.wxml--><view>header</view><!--footer.wxml--><view>footer</view><!--index.wxml--><includesrc="header.wxml"/><view>body</view><includesrc="footer.wxml"/>4.5全局页面的下拉刷新和上拉加载在编程实践中，两种经常被用到的技术就是：其一，下拉刷新，也就是，当用户在页面上下拉时，程序自动加载新的数据；其二，上拉加载，也就是，当用户在页面上拉时，显示更多的数据。小程序对这个需求提供了两类支持技术：全局页面的下拉上拉支持和局部页面的下拉上拉支持。本节介绍小程序的全局页面下拉刷新和上拉加载。为了实现小程序的全局页面下拉刷新和上拉加载功能，需要首先在小程序的app.json或者页面的.json文件中设置enablePullDownRefresh属性为true，同时在页面程序的.js文件中编写名称为onPullDownRefresh()函数和onReachBottom()函数的代码。举一个例子说明如何实现全局页面下拉刷新和上拉加载。这个例子首先显示一组图像，用户可以通过下拉或者上拉以显示更多的图像。为此，首先在mini-ch04-01工程的images文件夹下放置9张图像，文件名从01.jp到09.jpg，然后新建名称为refresh的页面，并设置refresh页面为首页面，如图所示：修改refresh.json为如下内容：修改refresh.wxss问如下内容：{

"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为如下内容：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});}}})运行这个程序，显示如图所示的页面：4.6案例：简单计算器计算器是一款非常常用的工具软件，在很多系统上都作为预装的工具存在，例如，在安卓手机上有计算器软件，在Windows操作系统上也有计算器软件等。下面开发一款简单的微信小程序计算器软件，可以完成简单的加、减、乘、除功能。4.6.1案例目标所开发的计算器只需完成简单的加减乘除功能。程序提供两个输入框，用于输入操作数，还需要提供一个选择框，用于选择操作符，当用户点击“=”按钮时，对两个操作数进行相关运算，并将结果显示出来。4.6.2案例分析程序页面可以布局在一个form表单组件中，在其中放置基本的表单元素组件。可以采用如图4-所示的布局。4.6.3案例实施新建一个名称为mini-ch04-02的程序工程，然后，修改页面index.wxml文件为如下内容：<!--index.wxml--><navigation-bartitle="简单计算器"back="{{false}}"color="black"background="#FFF"></navigation-bar><formbindsubmit="go"><inputtype="digit"name="operand01"value=""placeholder="请输入第一个操作数"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="请输入第二个操作数"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文件为如下内容：/**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发生了submit事件，携带数据为：',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:"没有选择操作符！"});}}})运行这个程序，显示如图所示的结果，输入相关数据进行运算:4.7练习：你点我应编写一个小程序，在小程序页面上以美观的两行两列方式显示四个按钮，当点击其中一个按钮时，在按钮下方显示一张与按钮对应的美观图像，当点击图像时，也可以在不同的多张图像之间切换。Q&A第5章小程序组件-Part2电子工业出版社为了设计更加便利和更加灵活的功能页面，微信提供了一系列功能丰富的组件，例如，scroll-view滚动组件实现页面的滚动功能，结合swiper组件和swiper-item组件可实现轮播图功能等。本章对小程序中常用的复合功能组件进行介绍。目录5.1scroll-view滚动组件5.2swiper和swiper-item轮播图组5.3navigator页面导航组件5.4tabBar及其使用5.5媒体组件5.6canvas画布组件5.7自定义组件5.8案例：美食餐厅5.9练习：选修课5.1scroll-view滚动组件scroll-view，顾名思义，就是可以滚动的组件，这是个非常常用的小程序组件。使用竖向滚动时，需要给scroll-view一个固定高度，一般通过WXSS设置height属性。scroll-view的常用属性及其含义如表：序号属性名类型默认值必填说明1scroll-xbooleanfalse否允许横向滚动2scroll-ybooleanfalse否允许纵向滚动3upper-thresholdnumber/string50否距顶部/左边多远时，触发scrolltoupper事件4lower-threshold number/string50否距底部/右边多远时，触发scrolltolower事件5scroll-topnumber/string无否设置竖向滚动条位置6scroll-leftnumber/string无否设置横向滚动条位置7scroll-with-animationbooleanfalse否在设置滚动条位置时使用动画过渡8refresher-enabledbooleanfalse否开启自定义下拉刷新9refresher-thresholdnumber45否设置自定义下拉刷新阈值10refresher-default-stylestringblack否设置自定义下拉刷新默认样式，支持设置black|white|none，none表示不使用默认样式11refresher-backgroundstring#FFF否设置自定义下拉刷新区域背景颜色12show-scrollbarbooleantrue否滚动条显隐控制(同时开启enhanced属性后生效)13binddragstarteventhandle无否滑动开始事件(同时开启enhanced属性后生效)detail{scrollTop,scrollLeft}14binddraggingeventhandle无否滑动事件(同时开启enhanced属性后生效)detail{scrollTop,scrollLeft}15binddragendeventhandle无否滑动结束事件(同时开启enhanced属性后生效)detail{scrollTop,scrollLeft,velocity}16bindscrolltouppereventhandle无否滚动到顶部/左边时触发17bindscrolltolowereventhandle无否滚动到底部/右边时触发18bindscrolleventhandle无否滚动时触发，event.detail={scrollLeft,scrollTop,scrollHei