小程序八：操作反馈

Posted 2020-08-20

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);  
    }  
})