美文网首页
微信效果记录_懒汉式

微信效果记录_懒汉式

作者: 一个冬季 | 来源:发表于2019-01-25 23:15 被阅读6次
    1、弹窗,一个输入框,一个确定,一个取消
    弹窗.png
    1、弹窗,一个输入框,一个确定,一个取消

    wxml

    <!--蒙层-->
    <view class='drawer_screen' hidden="{{isHiddenDialog}}"></view>
    <view class='passworddialog'  hidden="{{isHiddenDialog}}">
      <view class="drawer_title">提示</view>
       <view class="drawer_content">
         <view class="top grid">
          <label class="title col-0">金额</label>
          <input class="input_base input_h30 col-1" type='number' name="rName" placeholder='请输入金额' bindinput='inputNumberListener'></input>
        </view>
       </view>
       <view class='button_sure_calcle'>
          <view class='button_tb cancle' bindtap='cancleListener'>
            取消
          </view>
           <view class='button_tb sure' bindtap='sureListener'>
            确定
          </view>
       </view>
    </view>
    

    css

    .passworddialog {
      width: 650rpx;
      overflow: hidden;
      position: fixed;
      top: 50%;
      left: 0;
      z-index: 1001;
      background: #fafafa;
      margin: -150px 50rpx 0 50rpx;
      border-radius: 3px;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
    }
    
    .drawer_title {
      padding: 5px;
      font: 20px "microsoft yahei";
      text-align: center;
      display: flex;
      display: -webkit-flex;
      align-items: center;
      flex-direction: row;
      justify-content: center;
    }
    
    .drawer_content {
      margin-top: 10px;
      height: 80px;
      overflow-y: scroll;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      align-items: center;
    }
    
    .top{
        padding-top:8px;
    }
    
    .grid { display: -webkit-flex; display: flex; }
    
    .title {
        height: 30px;
        line-height: 30px;
        width: 160rpx;
        text-align: center;
        display: inline-block;
        font: 300 28rpx/30px "microsoft yahei";
    }
    
    .input_base {
        border: 2rpx solid #ccc;
        padding-left: 10rpx;
        margin-right: 50rpx;
    }
    .input_h30{
        height: 30px;
        line-height: 30px;
    }
    
    .col-1 {flex: 1}
    
    .button_sure_calcle{
      display: flex;
      display: -webkit-flex;
      flex-direction: row;
    }
    
    .button_tb{
      height: 40px;
      flex: 1;
      display: flex;
      align-items: center;
      font-size: 16px;
      justify-content: center;
      color: white;
    }
    
    .cancle{
      background: rgba(128, 128, 128, 0.473);
    }
    
    .sure{
      background: #22b1b1;
    }
    

    js:

    inputNumberListener:function(event){//金额输入监听
        this.data.number = e.detail.value;
      },
      cancleListener: function () { //取消
        this.data.number = "";
        this.setData({
          isHiddenDialog: true,
        });
      },
      sureListener: function () {
        this.setData({
          isHiddenDialog: true,
        });
       
      }
    

    相关文章

      网友评论

          本文标题:微信效果记录_懒汉式

          本文链接:https://www.haomeiwen.com/subject/ctnsjqtx.html