温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何在微信小程序中自定义弹窗

发布时间:2021-06-01 18:14:06 阅读:153 作者:Leah 栏目:web开发
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

如何在微信小程序中自定义弹窗?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

业务代码中:

  在业务代码中引入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,
    valuefalse
  },
  width: {
    type: Number,
    value85
  },
  position: {
    type: String,
    value'center'
  },
  title: {
    type: String,
    value''
  },
  showClose: {
    type: Boolean,
    valuetrue
  },
  showFooter: {
    type: Boolean,
    valuefalse
  },
},
/**
* 组件的初始数据
*/
data: {
},
options:{
  multipleSlotstrue
},
/**
* 组件的方法列表
*/
methods: {
  clickMask() {
    this.setData({ visiblefalse });
  },
  close(){
    this.setData({ visiblefalse });
  },
  cancel() {
    this.setData({ visiblefalse });
    this.triggerEvent('cancel');
  },
  confirm() {
    this.setData({ visiblefalse });
    this.triggerEvent('confirm');
  }
}
})

dialog.json:声明是组件就行 

{
  "component": true,
  "usingComponents": {}
}

dialog.wxss

  css可以根据自己喜好的样式调整,注意mask遮罩层的z-index高一点,确保在最上层

/* components/dialog/dialog.wxss */
.dialog-custom {
  width100vw;
  height100%;
  position: absolute;
  left0;
  top0;
  z-index9999;
}
.dialog-mask {
  position: fixed;
  top0;
  left0;
  right0;
  bottom0;
  z-index10000;
  width100vw;
  height100%;
  backgroundrgba(0000.3);
}
.dialog-main {
  position: fixed;
  z-index10001;
  top50%;
  left0;
  right0;
  width85vw;
  height: auto;
  margin: auto;
  transformtranslateY(-50%);
}
.dialog-container {
  margin0 auto;
  background#fff;
  z-index10001;
  border-radius3px;
  box-sizing: border-box;
  padding40rpx;
}
.dialog-container__title {
  width100%;
  height50rpx;
  line-height50rpx;
  margin-bottom20rpx;
  position: relative;
}
.dialog-container__title .title-label{
  display: inline-block;
  width100%;
  height50rpx;
  line-height50rpx;
  font-size36rpx;
  color#000;
  text-align: center;
}
.dialog-container__title .title-icon{
  width34rpx;
  height50rpx;
  position: absolute;
  top0;
  right0;
}
.dialog-container__title .title-icon image{
  width34rpx;
  height34rpx;
}

.dialog-container__body {
  padding-top10rpx;
  font-size32rpx;
  line-height50rpx;
}

.dialog-container__footer {
  height76rpx;
  line-height76rpx;
  font-size32rpx;
  text-align: center;
  border-top1px solid #f1f1f1;
  position: absolute;
  bottom0;
  left0;
  right0;
}

.dialog-container__footer .dialog-container__footer__cancel {
  width50%;
  color#999;
  display: inline-block;
}
.dialog-container__footer .dialog-container__footer__cancel::after{
  position: absolute;
  right50%;
  bottom0;
  content'';
  width2rpx;
  height76rpx;
  background#f1f1f1;
}
.dialog-container__footer .dialog-container__footer__confirm {
  color#3B98F7;
  width50%;
  display: inline-block;
  text-align: center;
}
/* components/dialog/dialog.wxss */
.dialog-custom {
width100vw;
height100%;
position: absolute;
left0;
top0;
z-index9999;
}
.dialog-mask {
position: fixed;
top0;
left0;
right0;
bottom0;
z-index10000;
width100vw;
height100%;
backgroundrgba(0000.3);
}
.dialog-main {
position: fixed;
z-index10001;
top50%;
left0;
right0;
width85vw;
height: auto;
margin: auto;
transformtranslateY(-50%);
}
.dialog-container {
margin0 auto;
background#fff;
z-index10001;
border-radius3px;
box-sizing: border-box;
padding40rpx;
}
.dialog-container__title {
width100%;
height50rpx;
line-height50rpx;
margin-bottom20rpx;
position: relative;
}
.dialog-container__title .title-label{
display: inline-block;
width100%;
height50rpx;
line-height50rpx;
font-size36rpx;
color#000;
text-align: center;
}
.dialog-container__title .title-icon{
width34rpx;
height50rpx;
position: absolute;
top0;
right0;
}
.dialog-container__title .title-icon image{
width34rpx;
height34rpx;
}
.dialog-container__body {
 padding-top10rpx;
 font-size32rpx;
 line-height50rpx;
}
.dialog-container__footer {
 height76rpx;
 line-height76rpx;
 font-size32rpx;
 text-align: center;
 border-top1px solid #f1f1f1;
 position: absolute;
 bottom0;
 left0;
 right0;
}
.dialog-container__footer .dialog-container__footer__cancel {
 width50%;
 color#999;
 display: inline-block;
}
.dialog-container__footer .dialog-container__footer__cancel::after{
 position: absolute;
 right50%;
 bottom0;
 content'';
 width2rpx;
 height76rpx;
 background#f1f1f1;
}
.dialog-container__footer .dialog-container__footer__confirm {
 color#3B98F7;
 width50%;
 display: inline-block;
 text-align: center;
}

关于如何在微信小程序中自定义弹窗问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×