• 微信小程序组件 自定义弹出框


    <!-- 点击立即抢拼弹出框 -->
    <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;
    }
  • 相关阅读:
    自定义类似smarty模板
    PHP函数相关知识点
    cookie的使用和设置
    进程通过内核缓存区请求设备I/O的一些事情
    多线程模型和问题
    C10K问题和多进程模型
    node.js----一个httpserver提交和解析get参数的例子
    nodejs解析url参数的三种方法
    node.js http模块和fs模块上机实验·
    c++中的srand()和rand() 转载 自:http://blog.sina.com.cn/s/blog_624c2c4001012f67.html
  • 原文地址:https://www.cnblogs.com/dianzan/p/7921041.html
Copyright © 2020-2023  润新知