微信小程序开发-交互反馈

官网文档链接：交互反馈

共用的wxml:

<button type="primary" bindtap="showToastView">showToast</button><button type="primary" bindtap="showLoadingView">showLoading</button><button type="primary" bindtap="hideToastView">hideToast</button><button type="primary" bindtap="hideLoadingView">hideLoading</button><button type="primary" bindtap="showModalView">showModal</button><button type="primary" bindtap="showActionSheetView">showActionSheet</button>

wx.showToast(OBJECT)

显示消息提示框

showToastView:function(){    wx.showToast({      title: 'showToast',      icon: "success",             //图标，有效值 "success", "loading"      image: "/images/index.png",  //自定义图标的本地路径，image 的优先级高于 icon,存在版本兼容性      duration: 1500,              //提示的延迟时间，单位毫秒，默认：1500      mask: true,                  //是否显示透明蒙层，防止触摸穿透，默认：false      success: function(){        console.log("success showToast!");      }    })  }

需要注意的就是image可以替代icon的，经测试image目前只支持本地路径

wx.showLoading(OBJECT)

基础库 1.1.0 开始支持，低版本需做兼容处理

显示 loading 提示框, 需主动调用wx.hideLoading才能关闭提示框

showLoadingView:  function(){    wx.showLoading({      title: 'showLoading',      mask:true,      success:function(e){        console.log("success showLoading!");      }    })  }

wx.hideToast()

隐藏消息提示框

wx.hideLoading()

基础库 1.1.0 开始支持，低版本需做兼容处理

隐藏 loading 提示框

showLoadingView:  function(){    wx.showLoading({      title: 'showLoading',      mask:true,      success:function(e){        console.log("success showLoading!");      }    })    setTimeout(function () {      wx.hideLoading()    }, 2000)  }

定时器部分一般在项目中是做网络请求，请求成功会隐藏loading

wx.showModal(OBJECT)

​显示模态弹窗

showModalView:function(){    wx.showModal({      title: '标题',      content: '内容',      showCancel:true, //默认true      cancelText:"off",  //默认“取消”      cancelColor:"#ffff00",      confirmText:"sure",      confirmColor:"#ffff00",      success:function(e){        console.log("errMsg: "+e.errMsg);        console.log("confirm: "+e.confirm);        console.log("cancel: "+e.cancel);      }    })  }

wx.showActionSheet(OBJECT)

​显示操作菜单

showActionSheetView:function(){    wx.showActionSheet({      itemList: ['A', 'B', 'C'],      itemColor:"#fff000",      success: function (res) {        console.log(res.tapIndex);        console.log(res.errMsg);      },      fail: function (res) {        console.log(res.errMsg)      }    })  }

然而，在项目中，我们直接照搬模态框这个这样写，并不能满足项目需求，不能友好的进行复杂点的弹窗业务。

Now，let's go！

wxml:

<!--button--><view class="btn" bindtap="powerDrawer" data-statu="open">button</view>   <!--mask--><view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view> <!--content--><!--使用animation属性指定需要执行的动画--><view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">  <!--drawer content-->  <view class="drawer_title">弹窗标题</view>   <view class="drawer_content">     <view class="top grid">       <label class="title col-0">标题</label>       <input class="input_base input_h30 col-1" name="rName" value="可自行定义内容"></input>     </view>     <view class="top grid">       <label class="title col-0">标题</label>       <input class="input_base input_h30 col-1" name="mobile" value="110"></input>     </view>     <view class="top grid">       <label class="title col-0">标题</label>       <input class="input_base input_h30 col-1" name="phone" value="拒绝伸手党"></input>     </view>     <view class="top grid">       <label class="title col-0">标题</label>       <input class="input_base input_h30 col-1" name="Email" value="仅供学习使用"></input>     </view>     <view class="top bottom grid">       <label class="title col-0">备注</label>       <input class="input_base input_h30 col-1" name="bz"></input>     </view>   </view>   <view class="btn_ok" bindtap="powerDrawer" data-statu="close">确定</view> </view>

wxss:

/*button*/.btn {  width: 80%;  padding: 20rpx 0;  border-radius: 10rpx;  text-align: center;  margin: 40rpx 10%;  background: #000;  color: #fff; } /*mask*/.drawer_screen {  width: 100%;  height: 100%;  position: fixed;  top: 0;  left: 0;  z-index: 1000;  background: #000;  opacity: 0.5;  overflow: hidden; } /*content*/.drawer_box {  width: 650rpx;  overflow: hidden;  position: fixed;  top: 50%;  left: 0;  z-index: 1001;  background: #FAFAFA;  margin: -150px 50rpx 0 50rpx;  border-radius: 3px; } .drawer_title{  padding:15px;  font: 20px "microsoft yahei";  text-align: center; } .drawer_content {  height: 210px;  overflow-y: scroll; /*超出父盒子高度可滚动*/} .btn_ok{  padding: 10px;  font: 20px "microsoft yahei";  text-align: center;  border-top: 1px solid #E8E8EA;  color: #3CC51F; } .top{  padding-top:8px; } .bottom {  padding-bottom:8px; } .title {  height: 30px;  line-height: 30px;  width: 160rpx;  text-align: center;  display: inline-block;  font: 300 28rpx/30px "microsoft yahei"; } .input_base {  border: 2rpx solid #ccc;  padding-left: 10rpx;  margin-right: 50rpx; } .input_h30{  height: 30px;  line-height: 30px; } .input_h60{  height: 60px; } .input_view{  font: 12px "microsoft yahei";  background: #fff;  color:#000;  line-height: 30px; } input {  font: 12px "microsoft yahei";  background: #fff;  color:#000 ; } radio{  margin-right: 20px; } .grid { display: -webkit-box; display: box; } .col-0 {-webkit-box-flex:0;box-flex:0;} .col-1 {-webkit-box-flex:1;box-flex:1;} .fl { float: left;} .fr { float: right;}

js:

Page({  data: {    showModalStatus: false  },  powerDrawer: function (e) {    var currentStatu = e.currentTarget.dataset.statu;    this.util(currentStatu)  },  util: function (currentStatu) {    /* 动画部分 */    // 第1步：创建动画实例     var animation = wx.createAnimation({      duration: 200, //动画时长       timingFunction: "linear", //线性       delay: 0 //0则不延迟     });    // 第2步：这个动画实例赋给当前的动画实例     this.animation = animation;    // 第3步：执行第一组动画     animation.opacity(0).rotateX(-100).step();    // 第4步：导出动画对象赋给数据对象储存     this.setData({      animationData: animation.export()    })    // 第5步：设置定时器到指定时候后，执行第二组动画     setTimeout(function () {      // 执行第二组动画       animation.opacity(1).rotateX(0).step();      // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象       this.setData({        animationData: animation      })      //关闭       if (currentStatu == "close") {        this.setData(          {            showModalStatus: false          }        );      }    }.bind(this), 200)    // 显示     if (currentStatu == "open") {      this.setData(        {          showModalStatus: true        }      );    }  }})

源码：模态框demo下载