小程序八：操作反馈

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:

<button type="default" bindtap="actionSheetTap">弹出action sheet</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
    <block wx:for-items="{{actionSheetItems}}">
        <action-sheet-item class="item" bindtap="bind{{item}}">{{item}}</action-sheet-item>
    </block>
    <action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</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 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>

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:

<view class="body-view">
    <toast hidden="{{toast1Hidden}}" bindchange="toast1Change">
        默认
    </toast>
    <button type="default" bindtap="toast1Tap">点击弹出默认toast</button>
</view>
<view class="body-view">
    <toast hidden="{{toast2Hidden}}" duration="3000" bindchange="toast2Change">
        设置duration
    </toast>
    <button type="default" bindtap="toast2Tap">点击弹出设置duration的toast</button>
</view>

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:

<view class="body-view">
    <loading hidden="{{hidden}}">
        加载中...
    </loading>
    <button type="default" bindtap="loadingTap">点击弹出loading</button>
</view>

index.js：

Page({
    data: {
        hidden: true
    },
    loadingTap: function(){
        this.setData({
          hidden: false
        });
        var that = this;
        setTimeout(function(){
          that.setData({
              hidden: true
          });
          that.update();
        }, 3000);
    }
})