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

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

具体代码如下：

业务代码中：

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

对话框可见='{{dialogVisible}} '显示页脚=“{ { FooterVibled } }”标题='测试一下视图类='对话框-正文'槽='对话框-正文'视图类='对话框-内容'申请获取你微信绑定的手机号/view view class=' dialog-footer ' slot=' dialog-footer ' button class=' cancel-BTN ' bind tap=' close '取消/button button open-type=' getPhoneNumber ' bind getPhoneNumber=' getPhoneNumber ' class=' confirm-BTN '授权/按钮/视图/视图/对话对话框组件：

成分下面新建对话。注意是成分不是页面，因为要作为组件引入到页面中

dialog.wxml:

需要传入四个属性

可见：是否显示弹窗

标题：标题

显示关闭：是否显示右上角关闭按钮

显示页脚：是否显示底部按钮

！-组件/对话框/对话框。wxml-view class=' dialog-custom ' wx : if=' { { visible } } ' view class=' dialog-mask ' bind tap=' click mask '/view class=' dialog-main ' view class=' dialog-container ' view class=' dialog-container ' view class=' dialog-container ' view class=' dialog-container _ _ title ' wx : if=' { { title。长度{ 0 } } ' view class=' title-label ' { title } }/view class=' title-icon ' image wx 3: if=' '取消/view view class=' dialog-container _ _ footer _ _ confirm ' bind tap=' confirm '确定/view/view/view/view/view/view/view对话框。射流研究…

组件({/***组件的属性列表*/properties : { visible : { type :布尔值，值：假}、宽度： {类型：数字，值： 85}、位置： {类型：字符串，值： '中心' }、标题： {类型：字符串，值3: ' ' }、show closes : { type 3: Boolean，值组件的初始数据*/data: {}，选项： { multipleslot 3360 true }，/***组件的方法列表*/methods : { click mask(){ this。setdata({ visible : false })；}，close(){ this。setdata({ visible : false })；}，取消(){ this。setdata({ visible : false })；这个。triggerevent(' cancel ')；}，确认(){这。setdata({ visible : false })；这个。触发事件('确认')；} } })对话框。js :声明是组件就行

{“组件”:为真，“使用组件”: { } }对话框。页面样式表

钢性铸铁可以根据自己喜好的样式调整，注意面具遮罩层的z指数高一点，确保在最上层

/*组件/对话框/dialog.wxss */.对话框-自定义{宽度： 100大众高度： 100%;绝对位置：左： 0；top : 0；z指数： 9999；}.对话框掩码{位置：固定；top : 0；左： 0；右： 0；底部： 0；z指数： 10000；宽度： 100大众；高度： 100%;background: rgba(0，0，0，0.3)；}.对话框-主{位置：固定；z指数： 10001；前：名50%；左： 0；右： 0；宽度大众： 85；height : auto rgin : auto transform : translateY(-50%)；}.对话框容器{ margin: 0 auto背景# fffz-index : 10001；边界半径： 3px盒子尺寸：边框盒子；padding: 40rpx }。dialog-container _ _ title { width : 100%；高度： 50 rpx线高： 50 rpx保证金-底部： 20 rpx相对位置：}.对话框-容器_ _标题title-label { display : inline-block；宽度： 100%;高度： 50 rpx线高： 50 rpxfont-size : 36rpxcolor: # 000文本对齐：中心；}.对话框-容器_ _标题title-icon { width : 34 rpx；高度： 50 rpx绝对位置：top : 0；右： 0；}.对话框-容器_ _标题。标题图标图像{ width : 34 rpx h8 : 34 rpx }。dialog-container _ _ body { padding-top : 10 rpx；font-size : 32 rpx线高： 50 rpx}.dialog-container _ _ footer { height : 76 rpx；线高： 76rpxfont-size : 32 rpx文本对齐：中心；边框-top: 1px实心# f1f1f1绝对位置：底部： 0；左： 0；右： 0；}.对话框容器_ _页脚。对话框-容器_ _页脚_ _取消{宽度：50%；color: # 999display:内联块；}.对话框容器_ _页脚{绝对位置： }后的对话框-容器_ _页脚_ _取消3360:右： 50%;底部： 0；内容： " "；宽度： 2 rpx 8 : 76 rpx背景# f1f1f1}。对话框容器_ _页脚对话框-容器_ _页脚_ _确认{ color : # 3b 98 F7；宽度： 50%;显示器：内联块；文本对齐：中心；}

/*组件/对话框/dialog.wxss */.对话框-自定义{宽度： 100大众高度： 100%;绝对位置：左： 0；top : 0；z指数： 9999；}.对话框掩码{位置：固定；top : 0；左： 0；右： 0；底部： 0；z指数： 10000；宽度： 100大众；高度： 100%;background: rgba(0，0，0，0.3)；}.对话框-主{位置：固定；z指数： 10001；前：名50%；左： 0；右： 0；宽度大众： 85；height : auto rgin : auto transform : translateY(-50%)；}.对话框容器{ margin: 0 auto背景# fffz-index : 10001；边界半径： 3px盒子尺寸：边框盒子；padding: 40rpx }。dialog-container _ _ title { width : 100%；高度： 50 rpx线高： 50 rpx保证金-底部： 20 rpx相对位置：}.对话框-容器_ _标题title-label { display : inline-block；宽度： 100%;高度： 50 rpx线高： 50 rpxfont-size : 36rpxcolor: # 000文本对齐：中心；}.对话框-容器_ _标题title-icon { width : 34 rpx；高度： 50 rpx绝对位置：top : 0；右： 0；}.对话框-容器_ _标题。标题图标图像{ width : 34 rpx h8 : 34 rpx }。dialog-container _ _ body { padding-top : 10 rpx；font-size : 32 rpx线高： 50 rpx}.dialog-container _ _ footer { height : 76 rpx；线高： 76rpxfont-size : 32 rpx文本对齐：中心；边框-top: 1px实心# f1f1f1绝对位置：底部： 0；左： 0；右： 0；}.对话框容器_ _页脚。对话框-容器_ _页脚_ _取消{宽度：50%；color: # 999display:内联块；}.对话框容器_ _页脚{绝对位置： }后的对话框-容器_ _页脚_ _取消3360:右： 50%;底部： 0；内容： " "；宽度： 2 rpx 8 : 76 rpx背景# f1f1f1}。对话框容器_ _页脚对话框-容器_ _页脚_ _确认{ color : # 3b 98 F7；宽度： 50%;显示器：内联块；文本对齐：中心；}总结

以上是边肖介绍的微信小程序封装的自定义弹出窗口的实现代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！