前言

入门小程序，熟悉了wxml与wxss语法后，还是有一些效果短时间实现不了， 今天写出两种常见的弹框

中间弹框wxml：

<view  class="view-mask"  bindtap="onClickDialogCenter" wx:if="{{showCenterrDialog}}" style="z-index:31 "  ><view class="zan-dialog {{ showCenterrDialog ? 'zan-dialog--show' : '' }}"><!-- 遮罩层  可以加Bindtap控制是否让弹框消失 -->  <view class="zan-dialog__mask"  />  <view class="zan-dialog__container2">     //这里面写你自己的弹框布局     <image  style="width: 560rpx; height: 560rpx; "   src="/images/ic_index_dialog_register.png"    ></image>  <button class="btn-login" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo"></button>  </view></view></view>

在当前wxml最下面加上弹框的布局， 比较重要的是view-mask ，他的wxss属性需要 position: fixed;，具体我们来看一下：

wxcss:

/* 自定义居中弹框------------------- */.zan-dialog__mask {  display:  none;  font-family:PingFangSC-Regular,PingFangSC;  position: fixed;  top: 0;  left: 0;  right: 0;  bottom: 0;  z-index: 2;background:rgba(0,0,0,0.5);  }.zan-dialog__container {  align-items: center;  display: flex;  flex-direction: column;  position: fixed;  width: 670rpx;  height: 522rpx;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);  background: #ffffff;  z-index: 40;  border-radius: 24rpx;}.zan-dialog--show .zan-dialog__container {}.zan-dialog--show .zan-dialog__mask {  display: block;}.view-mask{    z-index: 2;    width: 100vw;    height: 100vh;    position: fixed;    top: 0;    left: 0;    background: rgba(0, 0, 0, 0.5)}.view-raise-dialog2{  display: flex;  flex-direction: column;  border-radius: 16rpx;  background: #EEFFE7;  margin-top: 20rpx;  height: 174rpx;  width: 550rpx;}.btn-raise-dialog{  height: 96rpx;  line-height: 96rpx;  border-radius: 0rpx 0rpx 24rpx 24rpx;  width: 100%;  margin-top: 60rpx;  background:linear-gradient(90deg,rgba(111,194,49,1) 0%,rgba(160,243,106,1) 100%);  position: absolute;  bottom: 0;  font-size: 32rpx;  color: #ffffff;    }.zan-dialog__container2 {  align-items: center;  display: flex;  flex-direction: column;  position: fixed;  width: 670rpx;  height: 522rpx;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);  z-index: 40;  border-radius: 24rpx;}/* --------------------------------------------- */

  /**     * 页面的初始数据     */    data: {      showCenterrDialog: false,    },

  /***     * 中间弹框点击事件     */    onClickDialogCenter:function(){      this.setData({        showCenterrDialog: !this.data.showCenterrDialog      })    },

<!-- 自定义底部弹框 --><view class="modals modals-bottom-dialog"  bindtap="hideModal"  hidden="{{hideModal}}" catchtouchmove="preventTouchMove" >    <view class="modals-cancel" ></view>    <!-- modals中删除了bindtap="hideModal"只能点击确定才能消失 -->    <view class="bottom-dialog-body bottom-pos" animation="{{animationData}}">        //这里写你自己的布局    </view></view>

/*底部弹框 ---*/.modals{position:fixed; z-index: 999; top:0; left: 0; right:0; bottom: 0;}.modals-cancel{position:absolute; z-index:1000; top:0; left: 0; right:0; bottom: 0; background-color: rgba(0,0,0,.5);}.bottom-dialog-body{font-family:PingFangSC-Regular,PingFangSC;position:absolute; z-index:10001; bottom:0; left:0; right:0;  height: 1040rpx;  background-color: #fff; border-radius: 16rpx 16rpx 0rpx 0rpx;  display: flex;flex-direction: column; }/*动画前初始位置*/.bottom-pos{-webkit-transform:translateY(100%);transform:translateY(100%);}

    /**     * 页面的初始数据     */    data: {      hideModal: true, //模态框的状态  true-隐藏  false-显示    },

    // 显示遮罩层    showModal: function () {      var that = this;      that.setData({        hideModal: false      })      var animation = wx.createAnimation({        duration: 400,//动画的持续时间 默认400ms   数值越大，动画越慢   数值越小，动画越快        timingFunction: 'ease',//动画的效果 默认值是linear      })      this.animation = animation      setTimeout(function () {        that.fadeIn();//调用显示动画      }, 200)    },    // 隐藏遮罩层    hideModal: function () {      var that = this;      var animation = wx.createAnimation({        duration: 400,//动画的持续时间 默认400ms   数值越大，动画越慢   数值越小，动画越快        timingFunction: 'ease',//动画的效果 默认值是linear      })      this.animation = animation      that.fadeDown();//调用隐藏动画         setTimeout(function () {        that.setData({          hideModal: true        })      }, 200)//先执行下滑动画，再隐藏模块    },    //动画集    fadeIn: function () {      this.animation.translateY(0).step()      this.setData({        animationData: this.animation.export()//动画实例的export方法导出动画数据传递给组件的animation属性      })    },    fadeDown: function () {      this.animation.translateY(600).step()      this.setData({        animationData: this.animation.export(),      })    }, 

希望对大家有所帮助！