首先需要注意的是 wxml的这些属性将要被废弃，不过可以看两眼。不愿意看的可以看下一章节同样是操作回馈只不过是js版的哦。
一、action-sheet 操作菜单
从屏幕底下出来菜单。
这里不用w3c的代码了，他给的例子是闭包。麻烦而且新手不好理解。事实上真正写代码的时候，至少在这个地方不会用到闭包。
/* ---page/test/test.wxml----*/<button type="default" bindtap="actionSheetTap">弹出菜单选项</button><action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange"> <action-sheet-item bindtap="item1">选项一</action-sheet-item> <action-sheet-item bindtap="item2">选项二</action-sheet-item> <action-sheet-cancel class="cancel">取消</action-sheet-cancel></action-sheet>/* ---page/test/test.wxml----*/ |
/* ---page/test/test.js----*/Page({ data: { actionSheetHidden: true, //设置选项框是否显示 }, totoSheet: function(){ //当选项卡隐藏则打开，打开时则隐藏 this.setData({ actionSheetHidden: !this.data.actionSheetHidden }) }, actionSheetTap: function(e) { this.totoSheet(); }, actionSheetChange: function(e) { this.totoSheet(); }, item1:function(){ console.log("我是第一个选择项"); this.totoSheet(); }, item2:function(){ console.log("我是第二个选择项"); this.totoSheet(); }})/* ---page/test/test.js----*/ |
不是自动隐藏 ，而是需要自己设置 binchange 属性的。
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| hidden | Boolean | true | 是否隐藏 |
| bindchange | EventHandle |
|
点击背景或action-sheet-cancel按钮时触发change事件，不携带数据 |
二、modal 对话框
熟悉js+html的童鞋可以把他看作是一个加强版的 alert 。那么开始贴代码。因为没啥重点所以还是贴 W3C的代码。
/* ---page/test/test.wxml----*/<modal title="标题" confirm-text="confirm" cancel-text="cancel" hidden="{{modalHidden}}" bindconfirm="modalChange" bindcancel="modalChange"> 这是对话框一的内容。</modal><modal class="modal" hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2"> <view> 没有标题没有蒙层没有确定的modal </view> <view> 内容可以插入节点 </view></modal><view class="btn-area"> <button type="default" bindtap="modalTap">点击弹出modal</button> <button type="default" bindtap="modalTap2">点击弹出modal2</button></view>/* ---page/test/test.wxml----*/ |
/* ---page/test/test.js----*/Page({ data: { modalHidden: true, modalHidden2: true }, modalTap: function(e) { this.setData({ modalHidden: false }) }, modalChange: function(e) { this.setData({ modalHidden: true }) }, modalTap2: function(e) { this.setData({ modalHidden2: false }) }, modalChange2: function(e) { this.setData({ modalHidden2: true }) },})/* ---page/test/test.js----*/ |
bindconfirm 则可以看作 点击确认需要执行的方法。bindcancel则可以看做取消的执行方法。
在看 对话框二的 no-cancel 属性 证明这个对话框只有 一个确认按钮。则没有取消按钮。
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title | String |
|
标题 |
| hidden | Boolean | false | 是否隐藏整个弹窗 |
| no-cancel | Boolean | false | 是否隐藏cancel按钮 |
| confirm-text | String | 确定 | confirm按钮文字 |
| cancel-text | String | 取消 | cancel按钮文字 |
| bindconfirm | EventHandle |
|
点击确认触发的回调 |
| bindcancel | EventHandle |
|
点击取消以及蒙层触发的回调 |
三、toast 消息提示框
他的作用也很简单 ， 比如用微信支付成功的时候都知道他会提示一个支付成功的框框，会有很好的用户体验。以及等等等等。
这里同样不用W3C的代码。
/* ---page/test/test.wxml----*/<toast hidden="{{toast1}}" bindchange="toast1Change">默认(1500毫秒消失)</toast><toast hidden="{{toast2}}" duration="500" bindchange="toast2Change">500毫秒后消失</toast><button type="default" bindtap="toast1Tap">点击弹出默认toast</button><button type="default" bindtap="toast2Tap">点击弹出设置duration的toast</button>/* ---page/test/test.wxml----*/ |
/* ---page/test/test.js----*/Page({ data : { toast1 : true, toast2 : true, }, toast1Tap : function(){ this.setData({ toast1 : false }) }, toast2Tap : function(){ this.setData({ toast2 : false }) }, toast1Change:function(){ this.setData({ toast1 : true }) }, toast2Change:function(){ this.setData({ toast2 : true }) }})/* ---page/test/test.js----*/ |
这类似于延迟执行。但是好麻烦 给个差评。
四、loading 加载。
/* ---page/test/test.wxml----*/<loading hidden="{{hidden}}">加载中...</loading><button type="default" bindtap="loadingTap">点击弹出loading</button>/* ---page/test/test.wxml----*/ |
/* ---page/test/test.js----*/Page({ data: { hidden: true }, loadingTap: function(){ this.setData({ hidden: false }); var that = this; setTimeout(function(){ that.setData({ hidden: true }); that.update(); }, 3000); }})/* ---page/test/test.js----*/ |
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| hidden | Boolean | false | 是否隐藏 |
不过废弃也好。wxml的写法的确要多蛋疼有多蛋疼。而且还很麻烦。最重要的是。页面还要画出来。。之后隐藏。代码并不美观，我也是日了个大熊猫。