最新资讯当前位置:菲娱2 > 最新资讯 > >

恒行平台官网:微信小程序实战之自定义模态弹窗

  

[微信小程序,模态弹窗]微信小程序实战之自定义模态弹窗(8)

  

首先看看官方提供的模态弹窗,供大家参考,具体内容如下  

  

  
  

  

api如下:  

  

  

  

示例:  

  

  

  

这样的模态弹窗,充其量只能做个alert,提示一下信息。

  
  但是并不能使用它来处理复杂性的弹窗业务,因此写了Michael从新自定义了一个,采用了仿原生的样式写法  

  

wxml:  
  

  
  
    button              弹窗标题                        恒行注册平台                      确定   
  
  

wxss:  

  
  
  /*button*/  .btn {  width: 80%;  padding: 20rpx 0;  border-radius: 10rpx;  text-align: center;  margin: 40rpx 10%;  background: #000;  color: #fff;  }  /*mask*/  .drawer_screen {  width: 100%;  height: 100%;  position: fixed;  top: 0;  left: 0;  z-index: 1000;  background: #000;  opacity: 0.5;  overflow: hidden;  }  /*content*/  .drawer_box {  width: 650rpx;  overflow: hidden;  position: fixed;  top: 50%;  left: 0;  z-index: 1001;  background: #FAFAFA;  margin: -150px 50rpx 0 50rpx;  border-radius: 3px;  }  .drawer_title{  padding:15px;  font: 20px "microsoft yahei";  text-align: center;  }  .drawer_content {  height: 210px;  overflow-y: scroll; /*超出父盒子高度可滚动*/  }  .btn_ok{  padding: 10px;  font: 20px "microsoft yahei";  text-align: center;  border-top: 1px solid #E8E8EA;  color: #3CC51F;  }  .top{  padding-top:8px;  }  .bottom {  padding-bottom:8px;  }  .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;  }  .input_h60{  height: 60px;  }  .input_view{  font: 12px "microsoft yahei";  background: #fff;  color:#000;  line-height: 30px;  }  input {  font: 12px "microsoft yahei";  background: #fff;  color:#000 ;  }  radio{  margin-right: 20px;  }  .grid { display: -webkit-box; display: box; }  .col-0 {-webkit-box-flex:0;box-flex:0;}  .col-1 {-webkit-box-flex:1;box-flex:1;}  .fl { float: left;}  .fr { float: right;} 

(责任编辑:admin)

上一篇:恒行平台:Jquery 实现table样式的设定

下一篇:JavaScript中误用/g导致的正则test()无法正确重复执

推荐内容

客户服务热线

010-400-12345

在线客服