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

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