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


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 相关文章推荐
js 表单验证方法(实用)
Apr 28 Javascript
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
vue中动态绑定表单元素的属性方法
Feb 23 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 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和nginx交互实例讲解
2019/09/24 PHP
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
Python中apply函数的用法实例教程
2014/07/31 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
python IDLE添加行号显示教程
2020/04/25 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
初中三年学生的学习自我评价
2013/11/13 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
诉前财产保全担保书
2014/05/20 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
团日活动总结报告
2014/06/25 职场文书
工作简历自我评价
2015/03/11 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js
MySql数据库 查询时间序列间隔
2022/05/11 MySQL
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android