首先需要注意的是 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的写法的确要多蛋疼有多蛋疼。而且还很麻烦。最重要的是。页面还要画出来。。之后隐藏。代码并不美观，我也是日了个大熊猫。
时间： 2024-11-04 12:56:05
