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


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 插件开发方法小结
Oct 23 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
JQuery中each()的使用方法说明
Aug 19 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
vue一步步实现alert功能
Jul 05 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
JavaScript实现抖音罗盘时钟
Oct 11 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引用(&amp;)
2014/09/04 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
Python中的多重装饰器
2015/04/11 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
django数据库自动重连的方法实例
2019/07/21 Python
python根据多个文件名批量查找文件
2019/08/13 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
庆中秋节主题活动方案
2014/02/03 职场文书
服务之星事迹材料
2014/05/03 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
农村党支部承诺书
2015/04/30 职场文书
拖欠货款起诉状
2015/05/20 职场文书
婚庆主持词大全
2015/06/30 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
反邪教学习心得体会
2016/01/15 职场文书
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android
解决 redis 无法远程连接
2022/05/15 Redis