小程序八：操作反馈

action

---

1、action-sheet

从屏幕底部出现的菜单表。

属性名	类型	默认值	说明
hidden	Boolean	true	是否隐藏
bindchange	EventHandle		点击背景或action-sheet-cancel按钮时触发change事件，不携带数据

2、action-sheet-item

底部菜单表的子选项。

3、action-sheet-cancel

底部菜单表的取消按钮，和action-sheet-item的区别是，点击它会触发action-sheet的change事件，并且外观上会同它上面的内容间隔开来。

示例代码：

index.wxml:

弹出action sheet

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 < items.length; ++i) {
  (function(itemName) {
    pageObject['bind' + itemName] = function(e) {
      console.log('click' + itemName, e)
    }
  })(items[i])
}

Page(pageObject)

modal

---

对话弹窗

属性名	类型	默认值	说明
title	String		标题
hidden	Boolean	false	是否隐藏整个弹窗
no-cancel	Boolean	false	是否隐藏cancel按钮
confirm-text	String	确定	confirm按钮文字
cancel-text	String	取消	cancel按钮文字
bindconfirm	EventHandle		点击确认触发的回调
bindcancel	EventHandle		点击取消以及蒙层触发的回调

示例：

index.wxml:

    点击弹出modal
    点击弹出modal2

index.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
    })
  },
})

toast

---

​消息提示框

属性名	类型	默认值	说明
duration	Float	1500	hidden设置false后，触发bindchange的延时，单位毫秒
hidden	Boolean	false	是否隐藏
bindchange	EventHandle		duration延时后触发

示例代码：

index.wxml:

    
    点击弹出默认toast


    
    点击弹出设置duration的toast

index.js:

var toastNum = 2
var pageData = {}
pageData.data = {}
for (var i = 0; i <= toastNum; ++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)

loading

---

​消息提示框

属性名	类型	默认值	说明
hidden	Boolean	false	是否隐藏

示例代码：

index.wmxl:

    
    点击弹出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);
    }
})