zoukankan      html  css  js  c++  java
  • 微信小程序组件 自定义弹出框

    <!-- 点击立即抢拼弹出框 -->
    <view class='add-rob' bindtap="setModalStatus" data-status="0" wx:if="{{showModalStatus}}"></view>
    <view class='rob-box' wx:if="{{showModalStatus}}">
    <view class='rob-top'>
    </view>
    <!-- 底部按钮 -->
    <view class='rob-bottom flex'>
    </view>
    </view>
     
     
    //------------------------------------------------------------------------------------------------------
     
    // 弹窗
    setModalStatus: function (e) {
    var that = this;
    // console.log(e.currentTarget.dataset.all);
    // var parrv = this.data.parrv;
    //数据初始化分界-------------------------
    var animation = wx.createAnimation({
    duration: 200,
    timingFunction: "linear",
    delay: 0
    })

    this.animation = animation
    animation.translateY(300).step();

    this.setData({
    animationData: animation.export(),
    vidchange: false
    })

    if (e.currentTarget.dataset.status == 1) {
    that.setData(
    {
    showModalStatus: true,
    vidchange: true
    }
    );
    }
    setTimeout(function () {
    animation.translateY(0).step()
    this.setData({
    animationData: animation
    })
    if (e.currentTarget.dataset.status == 0) {
    this.setData(
    {
    showModalStatus: false
    }
    );
    }
    }.bind(this), 200)
    },
     
     
    //------------------------------------------------------------------------------------------------------
    /* 点击立即抢拼弹出框 */
    .add-rob{
    position: fixed;
    left: 0;
    bottom: 0;
    100%;
    height: 100%;
    ">rgba(0,0,0,0.5);
    overflow: hidden;
    z-index: 60;
    }
    .rob-box{
    100%;
    min-height: 200rpx;
    ">rgba(247,247,247,0.8);
    position: fixed;
    left: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 80;
    }
    /* .merch-stepper{
    display: flex;
    } */
    .merch-stepper-symbol{
    75rpx;
    height: 48rpx;
    ">white;
    border-radius: 8rpx;
    }
    .merch-stepper .nownum{
    50rpx;
    text-align: center;
    margin: 0 20rpx;
    }

    /* 底部按钮 */
    .rob-bottom{
    100%;
    height: 100rpx;
    ">#f7f7f7;
    padding: 15rpx 24rpx;
    position: absolute;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    }
  • 相关阅读:
    02 _ 该如何选择消息队列
    封装、抽象、继承、多态分别可以解决哪些编程问题?
    04 _ 理论一:当谈论面向对象的时候,我们到底在谈论什么?
    03 _ 面向对象、设计原则、设计模式、编程规范、重构,这五者有何关系?
    接口使用
    结构体和方法
    通道的高级玩法
    通道的基本操作
    极客时间 mp3提取
    iOS多线程中的单例
  • 原文地址:https://www.cnblogs.com/dianzan/p/7921041.html
Copyright © 2011-2022 走看看