Erlo

微信小程序封装自定义弹窗

2019-05-07 17:03:24 发布   1121 浏览  
页面报错/反馈
收藏 点赞

最近在做小程序的登录,需要同时获取用户手机号和头像昵称等信息,但是小程序又不支持单个接口同时获取两种数据,因此想到自定义一个弹窗,通过弹窗按钮触发获取手机号事件。记录一下。

具体代码如下:

业务代码中:

  在业务代码中引入dialog组件即可

  

    

      申请获取你微信绑定的手机号

      

        

        

      

    

  

dialog组件:

component下面新建dialog。注意是 component 不是 page ,因为要作为组件引入到页面中

  dialog.wxml:

  需要传入四个属性

    visible:是否显示弹窗

    title :标题

    showClose:是否显示右上角关闭按钮

    showFooter:是否显示底部按钮

  

    

      

        

          {{ title }}

          

            

          

        

      

        

      

      

        取消

        确定

      

    

  

 

dialog.js

  

Component({

/**

* 组件的属性列表

*/

properties: {

  visible: {

    type: Boolean,

    value: false

  },

  width: {

    type: Number,

    value: 85

  },

  position: {

    type: String,

    value: 'center'

  },

  title: {

    type: String,

    value: ''

  },

  showClose: {

    type: Boolean,

    value: true

  },

  showFooter: {

    type: Boolean,

    value: false

  },

},


/**

* 组件的初始数据

*/

data: {

 

},

options:{

  multipleSlots: true

},

/**

* 组件的方法列表

*/

methods: {

  clickMask() {

    this.setData({ visible: false });

  },

  close(){

    this.setData({ visible: false });

  },

  cancel() {

    this.setData({ visible: false });

    this.triggerEvent('cancel');

  },

  confirm() {

    this.setData({ visible: false });

    this.triggerEvent('confirm');

  }

}

})

 

dialog.json:声明是组件就行

 

{

  "component": true,

  "usingComponents": {}

}

 

 

dialog.wxss

  css可以根据自己喜好的样式调整,注意mask遮罩层的z-index高一点,确保在最上层

/* components/dialog/dialog.wxss */

.dialog-custom {

  width: 100vw;

  height: 100%;

  position: absolute;

  left: 0;

  top: 0;

  z-index: 9999;

}

.dialog-mask {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 10000;

  width: 100vw;

  height: 100%;

  background: rgba(0, 0, 0, 0.3);

}

.dialog-main {

  position: fixed;

  z-index: 10001;

  top: 50%;

  left: 0;

  right: 0;

  width: 85vw;

  height: auto;

  margin: auto;

  transform: translateY(-50%);

}

.dialog-container {

  margin: 0 auto;

  background: #fff;

  z-index: 10001;

  border-radius: 3px;

  box-sizing: border-box;

  padding: 40rpx;

}

.dialog-container__title {

  width: 100%;

  height: 50rpx;

  line-height: 50rpx;

  margin-bottom: 20rpx;

  position: relative;

}

.dialog-container__title .title-label{

  display: inline-block;

  width: 100%;

  height: 50rpx;

  line-height: 50rpx;

  font-size: 36rpx;

  color: #000;

  text-align: center;

}

.dialog-container__title .title-icon{

  width: 34rpx;

  height: 50rpx;

  position: absolute;

  top: 0;

  right: 0;

}

.dialog-container__title .title-icon image{

  width: 34rpx;

  height: 34rpx;

}


.dialog-container__body {

  padding-top: 10rpx;

  font-size: 32rpx;

  line-height: 50rpx;

}


.dialog-container__footer {

  height: 76rpx;

  line-height: 76rpx;

  font-size: 32rpx;

  text-align: center;

  border-top: 1px solid #f1f1f1;

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

}


.dialog-container__footer .dialog-container__footer__cancel {

  width: 50%;

  color: #999;

  display: inline-block;

}

.dialog-container__footer .dialog-container__footer__cancel::after{

  position: absolute;

  right: 50%;

  bottom: 0;

  content: '';

  width: 2rpx;

  height: 76rpx;

  background: #f1f1f1;

}

.dialog-container__footer .dialog-container__footer__confirm {

  color: #3B98F7;

  width: 50%;

  display: inline-block;

  text-align: center;

}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

/* components/dialog/dialog.wxss */

.dialog-custom {

width: 100vw;

height: 100%;

position: absolute;

left: 0;

top: 0;

z-index: 9999;

}

.dialog-mask {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

z-index: 10000;

width: 100vw;

height: 100%;

background: rgba(0, 0, 0, 0.3);

}

.dialog-main {

position: fixed;

z-index: 10001;

top: 50%;

left: 0;

right: 0;

width: 85vw;

height: auto;

margin: auto;

transform: translateY(-50%);

}

.dialog-container {

margin: 0 auto;

background: #fff;

z-index: 10001;

border-radius: 3px;

box-sizing: border-box;

padding: 40rpx;

}

.dialog-container__title {

width: 100%;

height: 50rpx;

line-height: 50rpx;

margin-bottom: 20rpx;

position: relative;

}

.dialog-container__title .title-label{

display: inline-block;

width: 100%;

height: 50rpx;

line-height: 50rpx;

font-size: 36rpx;

color: #000;

text-align: center;

}

.dialog-container__title .title-icon{

width: 34rpx;

height: 50rpx;

position: absolute;

top: 0;

right: 0;

}

.dialog-container__title .title-icon image{

width: 34rpx;

height: 34rpx;

}


.dialog-container__body {

padding-top: 10rpx;

font-size: 32rpx;

line-height: 50rpx;

}


.dialog-container__footer {

height: 76rpx;

line-height: 76rpx;

font-size: 32rpx;

text-align: center;

border-top: 1px solid #f1f1f1;

position: absolute;

bottom: 0;

left: 0;

right: 0;

}


.dialog-container__footer .dialog-container__footer__cancel {

width: 50%;

color: #999;

display: inline-block;

}

.dialog-container__footer .dialog-container__footer__cancel::after{

position: absolute;

right: 50%;

bottom: 0;

content: '';

width: 2rpx;

height: 76rpx;

background: #f1f1f1;

}

.dialog-container__footer .dialog-container__footer__confirm {

color: #3B98F7;

width: 50%;

display: inline-block;

text-align: center;

}

登录查看全部

参与评论

评论留言

还没有评论留言,赶紧来抢楼吧~~

手机查看

返回顶部

给这篇文章打个标签吧~

棒极了 糟糕透顶 好文章 PHP JAVA JS 小程序 Python SEO MySql 确认