小程序自定义弹窗（有显示动画的）

Myth丶恋晨 2022-05-04 04:00 266阅读 0赞

小程序类似与Vue.js，Angular.js这样的模板引擎，这类MVVM的数据驱动框架能快速的开发项目，但是在做小程序时必会遇到的一个问题就是弹窗非常生硬，没有过渡动画。下面的源码未例一个有动画的小程序弹窗

**代码片段链接：wechatide://minicode/OGY2jlmH7f3z**

页面结构：index.wxml

<view class='shade' hidden='{
       {popup}}' bindtap='hidePopup'></view>
    <view class='shade_box popup' hidden='{
       {popup}}'>
        <view class='title'><text>弹窗：</text></view>
        <view class='content'>我是一个有动画的特效的窗口</view>
        <view class='copy'>© 2018 helang.love@qq.com</view>
        <view class='msg' bindtap='hidePopup'>点击遮罩层关闭弹窗</view>
    </view>
    
    <view  style='margin:20rpx 50rpx;'>
        <button type='primary' bindtap='showPopup'>打开弹窗</button>
    </view>

展示样式：index.wxss

/* 遮罩 */
    .shade {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.75);
        z-index: 10;
    }
    .shade_box {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        z-index: 11;
        min-width: 200rpx;
        min-height: 200rpx;
        font-size: 28rpx;
        box-sizing: border-box;
        color: #333;
        font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
        letter-spacing: 0;
        word-wrap: break-word;
    
        animation-name:popup;
        animation-duration:0.2s;
        animation-timing-function:linear;
        animation-delay:0;
        animation-iteration-count:1;
        animation-direction:normal;
    }
    
    @keyframes popup
    {
        from{opacity:0;transform:scale(0.3,0.3);}
        to 	{opacity:1;transform:scale(1,1);}
    }
    
    
    /* 当前弹窗样式 */
    .popup{
        width: 600rpx;
        height: 600rpx;
        background-color: #ffffff;
    }
    .popup .title{
        padding: 0 20rpx;
        border-bottom: #e5e5e5 solid 1px;
        height: 70rpx;
        line-height: 70rpx;
        font-size: 32rpx;
        background-color: #f6f6f6;
    }
    .popup .content{
        margin: 100rpx;
        font-size: 40rpx;
        text-align: center;
        color: #0099ff;
    }
    .popup .copy{
        color: #999999;
        text-align: center;
    }
    .popup .msg{
        color: #ff0000;
        text-align: center;
        margin-top: 30rpx;
    }

交互逻辑：index.js

Page({
      data: {
        popup: true
      },
      /* 隐藏弹窗 */
      hidePopup(flag = true) {
        this.setData({
            "popup": flag
        });
      },
      /* 显示弹窗 */
      showPopup() {
        this.hidePopup(false);
      }
    })

最后礼貌性的给出效果图：

![70][]

当然啦，本示例只是简单的展示一下有动画弹窗的小程序如何做，更加精美的弹窗效果，只能由你自己去设计啦。

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[70]: /images/20220504/93469a4f323b46cc9e8c3c0a3d7b5b8e.png
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220504/befdb794298244d9897576c2fa699b77.png