当前位置: 首页 > 编程笔记 >

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

汪阳辉
2023-03-14
本文向大家介绍微信小程序封装自定义弹窗的实现代码,包括了微信小程序封装自定义弹窗的实现代码的使用技巧和注意事项,需要的朋友参考一下

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

具体代码如下:

业务代码中:

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

总结

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

 类似资料:
  • 本文向大家介绍微信小程序实现自定义modal弹窗封装的方法,包括了微信小程序实现自定义modal弹窗封装的方法的使用技巧和注意事项,需要的朋友参考一下 前言 小程序官方提供了 wx.showModal 方法,但样式比较固定,不能满足多元化需求,自定义势在必行~ 老规矩先上图 点击某个按钮,弹出 modal框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局。操作完点击取消或确定关

  • 本文向大家介绍微信小程序 自定义弹窗实现过程(附代码),包括了微信小程序 自定义弹窗实现过程(附代码)的使用技巧和注意事项,需要的朋友参考一下 这篇文章主要介绍了微信小程序 自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 小程序官网里弹出框一般都是类似下面形式: 而有时候我们需要更丰富的弹窗时,就可用自定义弹窗的样式:

  • 本文向大家介绍微信小程序实现自定义picker选择器弹窗内容,包括了微信小程序实现自定义picker选择器弹窗内容的使用技巧和注意事项,需要的朋友参考一下 微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都有定死的样式和内容。 例如: 但是大多数开发程序的情况下还是需要自己写样式的,或是内容的。 例如: wxml css js 以上就是本文的全部内容,希望对大

  • 本文向大家介绍微信小程序开发之实现自定义Toast弹框,包括了微信小程序开发之实现自定义Toast弹框的使用技巧和注意事项,需要的朋友参考一下 前言 之前有篇文章是写的Toast使用,但是有时候官方的样式并不能满足业务要求,怎么办呢,当然有解决办法了。有一个插件可以直接帮我们完成,WeToast。 先来看一下效果图: 怎么用呢,我们来看一下: WeTaost插件源码位于src目录下,包含3个文件。

  • 本文向大家介绍微信小程序class封装http代码实例,包括了微信小程序class封装http代码实例的使用技巧和注意事项,需要的朋友参考一下 这篇文章主要介绍了微信小程序class封装http,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 config.js utils/http.js models/movie.js index.js

  • 本文向大家介绍微信小程序实现漂亮的弹窗效果,包括了微信小程序实现漂亮的弹窗效果的使用技巧和注意事项,需要的朋友参考一下 最近项目里需要实现一个带着logo的美美哒弹窗,可是翻遍小程序的文档也只能见到wx.showModal这个丑丑的东西…… 场面一度十分尴尬 可是得做啊,要不然产品大姐又要暴走了…… 好吧,来研究一下模态对话框的性质自己DIY吧~ 实现思路 模态对话框之所以被叫做“模态”,就是因为