八： 操作提示（wxml 即将废弃）

Posted 2020-08-20 淡定君

首先需要注意的是 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----*/

这里自己写了一个totoSheet方法。当我点击选项一的时候 它提示一段代码之后隐藏菜单。当然里面还可以写一些跳转页面的操作。要注意的就是action-sheet-cancel点击

不是自动隐藏 ，而是需要自己设置 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----*/

首先看一下 对话框一。。这里他的例子用了两个值。confirm-text 可以把他看作一个确定按钮。而cancel-text按钮则可以看做取消。

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----*/

需要注意的是 bindchange这个属性。。当我点击button的时候。toast设置了显示。但是过了一段时间他并不消失。而当有了bindchange方法的时候。他过了一段时间会消失，

这类似于延迟执行。但是好麻烦 给个差评。

 

四、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	是否隐藏

虽然写了这么多，然并卵。即将被废弃。不过他的js版。和ionic1的一些操作回馈很像。。而且写起来也不是很难。。题外话，总感觉wxapp和angular2和ionic1是三胞胎。

不过废弃也好。wxml的写法的确要多蛋疼有多蛋疼。而且还很麻烦。最重要的是。页面还要画出来。。之后隐藏。代码并不美观，我也是日了个大熊猫。