小程序入门(3)-底部弹框与居中弹框的实现

前言

回顾：
小程序入门(1)-项目环境搭建
小程序入门(2)-简单网络框架封装

入门小程序，熟悉了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;
}
/* --------------------------------------------- */

Js代码：

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

  /***
     * 中间弹框点击事件
     */
    onClickDialogCenter:function(){

      this.setData({
        showCenterrDialog: !this.data.showCenterrDialog

      })

    },

底部弹框

wxml

<!-- 自定义底部弹框 -->
<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>

wxss

/*底部弹框 ---*/
.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%);}

js文件

    /**
     * 页面的初始数据
     */
    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(),
      })
    }, 

希望对大家有所帮助！