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


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 相关文章推荐
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
基于Layer+jQuery的自定义弹框
May 26 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
js实现消息滚动效果
Jan 18 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
JS中常用的消息框总结
Feb 24 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 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调用API接口实现天气查询功能的示例
2017/09/21 PHP
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
Python利用IPython提高开发效率
2016/08/10 Python
python决策树之CART分类回归树详解
2017/12/20 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
简单的项目建议书模板
2014/03/12 职场文书
公证委托书大全
2014/04/04 职场文书
一年级评语大全
2014/04/23 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
贷款工资证明范本
2015/06/12 职场文书
餐馆开业致辞
2015/08/01 职场文书
导游词之南京夫子庙
2019/12/09 职场文书