微信小程序封装自定义弹窗的实现代码


Posted in Javascript onMay 08, 2019

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

微信小程序封装自定义弹窗的实现代码

具体代码如下:

业务代码中:

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

<dialog visible="{{dialogVisible}}" showFooter="{{footerVisible}}" title="测试一下">

<view class='dialog-body' slot="dialog-body">



<view class='dialog-content'>申请获取你微信绑定的手机号</view>



<view class='dialog-footer' slot="dialog-footer">




<button class='cancel-btn' bindtap="close">取消</button>




<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" class='confirm-btn'>授权</button>



</view>


</view>

</dialog>

dialog组件:

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

dialog.wxml:

需要传入四个属性

visible:是否显示弹窗

title :标题

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

showFooter:是否显示底部按钮

<!--components/dialog/dialog.wxml-->
<view class='dialog-custom' wx:if="{{visible}}">
<view class='dialog-mask' bindtap="clickMask"></view>


<view class="dialog-main">



<view class="dialog-container">




<view class='dialog-container__title' wx:if="{{title.length>0}}">





<view class='title-label'>{{ title }}</view>





<view class='title-icon'>






<image wx:if="{{showClose}}" bindtap='close' src='/images/close-btn.png'></image>





</view>




</view>



<view class='dialog-container__body'>




<slot name="dialog-body"></slot>



</view>



<view class='dialog-container__footer' wx:if="{{showFooter}}">




<view class='dialog-container__footer__cancel' bindtap="close">取消</view>




<view class='dialog-container__footer__confirm' bindtap='confirm'>确定</view>



</view>


</view>

</view>
</view>

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;
}

总结

以上所述是小编给大家介绍的微信小程序封装自定义弹窗的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
jQuery Study Notes学习笔记 (二)
Aug 04 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 #Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 #Javascript
js实现继承的方法及优缺点总结
May 08 #Javascript
微信小程序人脸识别功能代码实例
May 07 #Javascript
iphone刘海屏页面适配方法
May 07 #Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 #Javascript
JavaScript实现随机点名器实例详解
May 07 #Javascript
You might like
php获取当月最后一天函数分享
2015/02/02 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
js打造数组转json函数
2015/01/14 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
python面向对象之类属性和类方法案例分析
2019/12/30 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
十岁生日父母答谢词
2014/01/18 职场文书
生产厂长岗位职责
2014/02/21 职场文书
主办会计岗位职责
2014/03/13 职场文书
买卖协议书范本
2014/04/21 职场文书
英语复习计划
2015/01/19 职场文书
红旗渠导游词
2015/02/09 职场文书
OpenCV实现常见的四种图像几何变换
2022/04/01 Python
浅谈Redis缓冲区机制
2022/06/05 Redis