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


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 相关文章推荐
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
Javascript玩转继承(一)
May 08 Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
AngularJS创建自定义指令的方法详解
Nov 03 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 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
德生PL660的电路分析和打磨
2021/03/02 无线电
最简单的PHP程序--记数器
2006/10/09 PHP
杏林同学录(八)
2006/10/09 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
laravel 数据验证规则详解
2019/10/23 PHP
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
js this函数调用无需再次抓获id,name或标签名
2014/03/03 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
Django发送html邮件的方法
2015/05/26 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
python实现logistic分类算法代码
2020/02/28 Python
什么是Remote Module
2016/06/10 面试题
《乞巧》教学反思
2014/02/27 职场文书
结婚保证书
2015/01/16 职场文书
大足石刻导游词
2015/02/02 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
电力工程合作意向书
2015/05/11 职场文书
大队委员竞选稿
2015/11/20 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python