微信小程序开发基础

···························································· 第5章Chapter5 互动操作组件本章主要介绍互动操作组件的属性和常见用法，包括底部菜单组件actionsheet、弹出对话框组件modal、消息提示框组件toast、加载提示组件loading等组件的属性和用法。App软件经常可以从底部弹出很多选项，这种效果可以在小程序中用actionsheet组件实现。弹出对话框组件modal常用来提示一些信息；例如，退出应用、修改资料等。消息提示框组件toast经常用来提示提交成功或者正在加载。加载提示组件loading通常使用在请求网络数据时的一种方式，通过hidden属性设置显示与否。 5.1底部菜单组件actionsheet App软件经常可以从底部弹出很多选项，这种效果可以在小程序中用actionsheet组件实现。actionsheet组件是从底部弹出可选菜单项，actionsheet有两个子组件： 每个选项actionsheetitem和取消选项actionsheetcancel。actionsheetcancel和actionsheetitem的区别是： 点击actionsheetcancel会触发actionsheet的change事件，并且外观上会同actionsheetcancel上面的内容间隔开来。actionsheet的属性说明如表51所示。在actionsheet组件中可以放置任何组件。表51actionsheet属性相关信息 属性类型说明hiddenBoolean是否隐藏，默认值为truebindchangeEventHandle点击背景或actionsheetcancel按钮时触发change事件，不携带数据例51代码如下，其效果如图51所示。 例51 弹出action sheet {{item}} ◆微信小程序开发基础第◆5章互动操作组件 取消 //index.js var items=\['item1', 'item2', 'item3', 'item4'\] var pageObject={ data: { actionSheetHidden: true, actionSheetItems: items }, actionSheetTap: function(e) { this.setData({ actionSheetHidden: !this.data.actionSheetHidden }) }, actionSheetChange: function(e) { this.setData({ actionSheetHidden: !this.data.actionSheetHidden }) } } for (var i=0; i (function(itemName) { pageObject\['bind'+itemName\]=function(e) { console.log('click'+itemName, e) } })(items\[i\]) } Page(pageObject)图51actionsheet组件的应用5.2弹出对话框组件modal 弹出对话框组件modal常用来提示一些信息；例如，退出应用、修改资料等。模态弹窗是对整个界面进行覆盖，防止用户对界面中的其他内容进行操作。对于需要用户明确知晓的操作结果状态可通过模态对话框来提示，并可附带下一步操作指引。modal的属性说明如表52所示。表52modal属性相关信息 属性类型说明titleString标题hiddenBoolean是否隐藏整个弹窗，默认值为falsenocancelBoolean是否隐藏cancel按钮，默认值为falseconfirmtextStringconfirm按钮文字，默认值为确定canceltextStringcancel按钮文字，默认值为取消bindconfirmEventHandle点击确认触发的回调bindcancelEventHandle点击取消以及蒙层触发的回调例52代码如下，其效果如图52所示。 例52 cancel-text="取消" hidden="{{modalHidden1}}" bindconfirm="modalChange1" bindcancel="modalChange1"> 这是对话框的内容 cancel-text="取消" hidden="{{modalHidden2}}" bindconfirm="modalChange2" bindcancel="modalChange2"> 点击弹出包含两个按钮的对话框 点击弹出包含一个按钮的对话框 //index.js var items=\['**项', '第二项', '第三项', '第四项'\]; Page({ data: { modalHidden1: true, modalHidden2: true }, modalTap1: function(e) { this.setData({ modalHidden1: false }) }, modalChange1: function(e) { this.setData({ modalHidden1: true }) }, modalTap2: function(e) { this.setData({ modalHidden2: false }) }, modalChange2: function(e) { this.setData({ modalHidden2: true }) } }) 图52modal组件的应用5.3消息提示框组件toast 消息提示框组件toast经常用来提示提交成功或者正在加载。toast弹出式提示适用于轻量级的成功提示，1.5s后自动消失，对用户影响较小，适用于不需要强调的操作提醒，例如成功提示。注意该形式不适用于错误提示，因为错误提示需要明确告知用户，不适合使用一闪而过的弹出式提示。toast的属性说明如表53所示。表53toast属性相关信息 属性类型说明durationFloathidden设置false后，触发bindchange的延时，单位为毫秒(ms)，默认值为1500hiddenBoolean是否隐藏，默认值为falsebindchangeEventHandleduration延时后触发例53代码如下，其效果如图53所示。 例53 默认 点击弹出默认toast "toast2Change"> 设置duration 点击弹出设置duration的toast //index.js var toastNum=2 var pageData={} pageData.data={} for (var i=0; i pageData.data\['toast'+i+'Hidden'\]=true; (function(index) { pageData\['toast'+index+'Change'\]=function(e) { var obj={} obj\['toast'+index+'Hidden'\]=true; this.setData(obj) } pageData\['toast'+index+'Tap'\]=function(e) { var obj={} obj\['toast'+index+'Hidden'\]=false this.setData(obj) } })(i) } Page(pageData)图53toast组件的应用 5.4加载提示组件loading 加载提示组件loading通常使用在请求网络数据时的一种方式，通过hidden属性设置显示与否。如果加载样式覆盖整个页面，由于无法明确告知具体加载的位置或内容将可能引起用户的焦虑感，因此应谨慎使用。除了在某些全局性操作下不要使用模态的加载。局部加载反馈只在触发加载的页面局部进行反馈，这样的反馈机制更加有针对性，页面跳动小，是微信推荐的反馈方式。loading属性为hidden，默认为false（不隐藏）。 例54代码如下，其效果如图54所示。 例54 加载中... 点击弹出loading //index.js Page({ data: { hidden: true }, loadingTap: function() { this.setData({ hidden: false }); var that=this; setTimeout(function() { that.setData({ hidden: true }); that.update(); }, 3000); } })图54loading组件的应用 习题5〖*2〗问答题1. 请说明actionsheet组件的常见属性。 2. 请说明modal组件的常见属性。 3. 请说明toast组件的常见属性。 4. 请说明loading组件的常见属性。