vue+thinkphp构建红包页面前后端第二篇

github源码:https://github.com/CiroMzy/redpocket

演示地址:http://mazhaoyang.cn/demos/redpocket/

这里说下这个项目的结构。这个项目是嵌入app的一个红包列表页,可以单独点击红包,也可以点击一键开启红包。点击红包后弹出红包和对应的获得的积分、金额等信息。

从前端讲,这有五个整体模块。弹出红包、加载中图片、红包列表、没有红包时显示的内容和一键领取按钮。

弹出红包模块

这个模块涉及到的内容有:点击按钮弹出该模块,接收父组件的传值,点击关闭该组件。

在父组件中,我用showpocket控制它的显示隐藏,并在显示之前,将需要显示的值通过 pocketVals传给子组件。并绑定@closePocket事件。

在pocket组件中,需要做的几件事是:将获得的值渲染出来,做一个出场动画,点击后触发父组件关闭事件。

出场动画我用的css3

  .goout{
    animation-name: bounceOutUp;
    transform-origin: center bottom;
    animation-duration: 0.6s;
    animation-fill-mode: both;
  }
  @keyframes bounceOutUp {
    20% {
      transform: translate3d(0, -10px, 0);
    }

    40%, 45% {
      opacity: 1;
      transform: translate3d(0, 20px, 0);
    }

    to {
      opacity: 0;
      transform: translate3d(0, -2000px, 0);
    }
  }
绑定class  =》goout,在点击时,给红包添加上goout,然后触发动画,父组件开一个定时器,动画结束时,关闭pocket组件。

这里,通过$emit触发父组件事件

  export default{
    name:'pocket',
    props:['pocketVals'],
    data(){
      return {
        bounceIn:false,
      }
    },
    mounted(){
        var _this = this;
        setTimeout(function () {
          _this.bounceIn = true;
        },1000)
    },
    methods:{
      closePoc(){
          this.$emit('closePocket');
      }
    }
  }

随机浏览