微信小程序 自定义浮层(弹出对话框为例)

<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>  <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">  <!--对话框标题-->  <view class="dialog-title">    请输入新地址  </view>   <view class="line-top"></view>  <!--对话框输入部分-->  <view class="input-view"> <view class="input01"></view> <textarea class="input-style" type="text"   placeholder="请输入新地址"  bindblur="bind_textarea"  value="{{address}}" />  <!--<input type="text" bindblur="input_content" class="input-style"/>  --></view>  <!--对话框按钮-->  <view class="line-top">    </view>  <view class="btn-view">    <view class="btn-cancel" bindtap="click_cancel">              取 消    </view>    <view class="btn-line">    </view>    <view class="btn-cancel" bindtap="click_ok">              确 定    </view>  </view>  </view>  

.commodity_screen {  width: 100%;  height: 100%;  position: fixed;  top: 0;  left: 0;  background: #000;  opacity: 0.2;  overflow: hidden;  z-index: 1000;  color: #fff;}.commodity_attr_box {  width: 80%;  overflow: hidden;  position: fixed;  margin-top: 380rpx;  margin-left: 10%;  z-index: 2000;  background: #fff;  border-radius: 10px;}.btn-line{  width: 1px;  background-color: #dcdcdc;}.btn-view{  width: 100%;  display: flex;  height: 40px;  flex-direction: row;  justify-content: space-around}.line-top{   width: 100%;   height: 1px;   background-color: #dcdcdc;}.btn-cancel{  width: 49%;  text-align: center;  display: flex;  flex-direction: column;  justify-content: center;}.dialog-title{  margin-top: 15px;  text-align: center;  margin-bottom: 10px;}.input01{ width: 100%; height: 20rpx; background: #f1f1f1;}.input-style{  width: 90%;  margin-left: 5%;  height: 80px;  text-align: center;  }.input-view{  height: 100px;  width: 100%;  margin-left: 0%;  border-radius: 0px;  margin-bottom: 0px;  background: #f1f1f1;}

showModal: function () {    // 显示遮罩层      var animation = wx.createAnimation({      duration: 200,      timingFunction: "linear",      delay: 0    })    this.animation = animation    animation.translateY(300).step()    this.setData({      animationData: animation.export(),      showModalStatus: true    })    setTimeout(function () {      animation.translateY(0).step()      this.setData({        animationData: animation.export()      })    }.bind(this), 20)  },//myview 为点击控件的bindtap 应用时写在对应控件中就好  myview: function () {    if (this.data.showModalStatus) {      this.hideModal();    } else {      this.showModal();    }  },  hideModal: function () {    // 隐藏遮罩层      var animation = wx.createAnimation({      duration: 200,      timingFunction: "linear",      delay: 0    })    this.animation = animation    animation.translateY(300).step()    this.setData({      animationData: animation.export(),    })    setTimeout(function () {      animation.translateY(0).step()      this.setData({        animationData: animation.export(),        showModalStatus: false      })    }.bind(this), 20)  },  click_cancel: function () {    console.log("点击取消");    this.hideModal();  },  click_ok: function () {    console.log("点击确定，输入的信息为为==", inputinfo);    this.hideModal();  },  input_content: function (e) {    console.log(e);    inputinfo = e.detail.value;  },

另外：

1. 写在Page外面：

    var inputinfo = "";

2.写在data里面：

    animationData:"",    showModalStatus:false,    address: ""

欢迎留言交流 一起进步 谢谢！