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

网络编程 2025/11/30 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

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

具体代码如下：

业务代码中：

　　在业务代码中引入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;
}

总结

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

微信小程序,自定义弹窗

标签：

微信小程序,自定义弹窗

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

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

暂无微信小程序封装自定义弹窗的实现代码的评论...

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

微信小程序,自定义弹窗

vue使用vuex实现首页导航切换不同路由的方法

Vue.js轮播图走马灯代码实例（全）

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接