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;
    }
  • 相关阅读:
    springmvc学习:处理方法返回值的可选类型
    【MongoDB for Java】Java操作MongoDB
    过滤器与拦截器
    摘录
    struts2中运用通配符(边学边记)
    微信:一款软件带起的微时代营销
    Php连接mysql处理中文乱码
    dui xiang yin yong
    hibernate数据的三种存在状态(只与事务有关)
    session机制
  • 原文地址:https://www.cnblogs.com/dianzan/p/7921041.html
Copyright © 2011-2022 走看看