更新：反馈操作官方文档加在了API处
今天学习了小程序的反馈操作，然后去官网的文档中查看，惊奇的发现居然没有相应文档。。
下面我就来总结一下学习的这四个反馈操作：
1、 action-sheet：从底部弹出来的弹窗
效果图如图一，
相关代码如下：
WXML中：
<view class="container">
<button type="primary" bindtap="click"> 按钮 </button >
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
<action-sheet-item bindtap="itemClick" data-name="name1" data-id="1">item1</action-sheet-item>
<action-sheet-item bindtap="itemClick" data-name="name2">item2</action-sheet-item>
<action-sheet-item bindtap="itemClick" data-name="name3">item3</action-sheet-item>
<action-sheet-cancel >取消</action-sheet-cancel>
</action-sheet>
</view>
然后我们在js中写如下代码：
Page({
data:{
actionSheetHidden:true
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
},
click:function(){
this.setData({ actionSheetHidden:false})
},
actionSheetChange:function(){
this.setData({actionSheetHidden:true})
},
itemClick:function(event){
//console.log(event)
}
})
代码解释：
首先我们在页面中的action-sheet里绑定一个函数bindchange="actionSheetChange"，然后在js中的data里给个默认值为true，默认隐藏为真，表示默认不显示。然后在下面的点击函数（按钮绑定的点击事件）中给其设置值为false，意思是点击后显示该弹窗。接着再看之前绑定的actionSheetHidden函数和itemClick函数，都给其设置值为true，表示点击其他的后隐藏掉弹窗。其中的itemClick函数里，我们可以根据参数event来进行参数的获取和操作。
注：下面的剩余的三个都是通过这个点击事件来实现的，所以下面就不多作介绍
2、 modal：模式对话框
效果图如图2
相关代码如下：
WXML中：
<view class="container">
<button type="primary" bindtap="click"> 按钮 </button >
<modal title="标题" confirm-text="确认" cancel-text="取消" hidden="{{modalHidden}}"
bindconfirm="modalConfirm" bindcancel="modalCancel">
这是对话框的内容。
</modal>
</view>
然后我们在js中写如下代码：
Page({
data:{
modalHidden:true
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
},
click:function(){
this.setData({ modalHidden:false})
},
modalConfirm:function(){
console.log("modalConfirm")
this.setData({modalHidden:true})
},
modalCancel:function(){
console.log("modalCancel")
this.setData({modalHidden:true})
}
})
代码解释：
这个和上面的差不多，一个确认按钮一个取消按钮，所以就不做多余的解释了。
3、toast ： 消息提示框 如删除成功之类的提示
效果图如图3
相关代码如下：
WXML中：
<view class="container">
<button type="primary" bindtap="click"> 按钮 </button >
<toast hidden="{{toastHidden}}" duration="3000" bindchange="toastChange">
默认
</toast>
</view>
然后我们在js中写如下代码：
Page({
data:{
toastHidden:true
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
},
click:function(){
this.setData({ toastHidden:false})
},
toastChange:function(){
//console.log("toastChange")
this.setData({toastHidden:true})
}
})
代码解释：
我们可以注意到这里的WXML中的<toast></toast>中多了个duration属性，意思是表示维持的时间，当时间一过后，就会触发后面的bindchange="toastChange"函数。
4、loading ： 加载中，一个转的圈圈
效果图如图4
相关代码如下：
WXML中：
<view class="container">
<button type="primary" bindtap="click"> 按钮 </button >
<loading hidden="{{loadinHidden}}" >
加载中...
</loading>
</view>
然后我们在js中写如下代码：
Page({
data:{
loadinHidden:true
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
},
click:function(){
this.setData({ loadinHidden:false})
var that = this;
setTimeout(function(){
that.setData({loadinHidden:true})
},1500)
},
toastChange:function(){
//console.log("toastChange")
this.setData({toastHidden:true})
}
})
代码解释：
这里的反馈操作一般用在跳转页面或者ajax刷新什么的，所以这个转圈圈也是要时间设置的，可以看到代码中，我们设置了一个setTimeout来确定消失的时间，其上面就是我们需要操作其他数据的逻辑。
好了，这四个反馈操作就总结到这里，喜欢或者觉得有用的点个赞关注一下什么的。
