E企盈营销工具技术服务商 热线:4006-838-530

小程序自定义弹窗(有显示动画的)

E企盈直播平台营销卖货系统

小程序类似与Vue.js,Angular.js这样的模板引擎,这类MVVM的数据驱动框架能快速的开发项目,但是在做小程序时必会遇到的一个问题就是弹窗非常生硬,没有过渡动画。下面的源码未例一个有动画的小程序弹窗代码片段链接:wechatide://minicode/OGY2jlmH7f3z页面结构:index.wxmlview class=’shade’ hidden='{{popup}}’ bindtap=’hidePopup’/viewview 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/viewview  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.jsPage({  data: {    popup: true  },  /* 隐藏弹窗 */  hidePopup(flag = true) {    this.setData({        “popup”: flag    });  },  /* 显示弹窗 */  showPopup() {    this.hidePopup(false);  }})最后礼貌性的给出效果图:

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序自定义弹窗(有显示动画的)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏