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


    <!-- 点击立即抢拼弹出框 -->
    <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;
    }
  • 相关阅读:
    spring+hibernate常见异常集合
    Java报错原因汇总
    java常见异常集锦
    连接池 druid(阿里巴巴的框架)
    企业支付宝账号开发接口实现
    Maven使用常见问题整理
    MySQL的分页
    Struts2中通配符的使用
    Centos下安装mysql 总结
    将linux用在开发环境中
  • 原文地址:https://www.cnblogs.com/dianzan/p/7921041.html
Copyright © 2020-2023  润新知