微信小程序封装自定义弹窗的实现代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序封装自定义弹窗的实现代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5928字，纯文字阅读大概需要9分钟。
内容图文
最近在做小程序的登录，需要同时获取用户手机号和头像昵称等信息，但是小程序又不支持单个接口同时获取两种数据，因此想到自定义一个弹窗，通过弹窗按钮触发获取手机号事件。记录一下。
具体代码如下：
业务代码中：
在业务代码中引入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;
}
总结
以上所述是小编给大家介绍的微信小程序封装自定义弹窗的实现代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
内容总结
以上是互联网集市为您收集整理的微信小程序封装自定义弹窗的实现代码全部内容，希望文章能够帮你解决微信小程序封装自定义弹窗的实现代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】