小程序之四种反馈操作

---

更新：反馈操作官方文档加在了API处

---

今天学习了小程序的反馈操作，然后去官网的文档中查看，惊奇的发现居然没有相应文档。。
下面我就来总结一下学习的这四个反馈操作：

1、 action-sheet：从底部弹出来的弹窗

效果图如图一，

图1

相关代码如下：
WXML中：

     按钮 

    

然后我们在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

图2

相关代码如下：
WXML中：

     按钮 

    

然后我们在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

图3

相关代码如下：
WXML中：

     按钮 

    

然后我们在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中的中多了个duration属性，意思是表示维持的时间，当时间一过后，就会触发后面的bindchange="toastChange"函数。

4、loading ： 加载中，一个转的圈圈

效果图如图4

图4

相关代码如下：
WXML中：

     按钮 

    

然后我们在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来确定消失的时间，其上面就是我们需要操作其他数据的逻辑。

好了，这四个反馈操作就总结到这里，喜欢或者觉得有用的点个赞关注一下什么的。