阅读 35

小程序-自定义模态框弹框

小程序有官方的 wx.showModal()方法来定义弹窗内容,但是弹窗显示只能定义文本。可参考官方文档。

自定义图片弹窗:

    
    
if="isModel">
if="changeModel">

确定

 

<span
      class="flex-sub icon-info padding-left-sm blue text-xl position-rel"
      :style="{ top:isIphone?‘-14rpx‘:‘-4rpx‘}"
      @click="gotoGuide"
>span>

data(){
return{ changeModel: false, isModel: false, } }
methods:{
    gotoGuide() {
      this.changeModel = !this.changeModel;
      this.isModel = !this.isModel;
    },
    //  确认
    confirmSend() {
      console.log("确认");
      this.changeModel = !this.changeModel;
      this.isModel = !this.isModel;
    }
    
}

css

/* 引导页弹窗样式 */
.modalMask {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   background: #000;
   opacity: 0.5;
   overflow: hidden;
   z-index: 9000;
   color: #fff;
 }
 .modalDialog {
   box-sizing: border-box;
   width: 640rpx;
   overflow: hidden;
   position: fixed;
   top: 50%;
   left: 50%;
   z-index: 9999;
   background: #fff;
   margin: -460rpx -320rpx;
   border-radius: 8rpx;
 }
 .modalContent {
   box-sizing: border-box;
   display: flex;
   padding: 50rpx 53rpx;
   font-size: 32rpx;
   align-items: center;
   justify-content: center;
   flex-direction: column;
 }
 .contentTip {
   text-align: center;
   font-size: 36rpx;
   color: #333333;
 }
 .teleStyle {
   background: #ffffff;
   border: 1px solid #979797;
   border-radius: 6rpx;
   line-height: 50rpx;
   height: 50rpx;
   box-sizing: border-box;
   padding-left: 12rpx;
   width: 460rpx;
   font-size: 28rpx;
   /*color: rgba(0,0,0,0.25);*/
   margin-top: 30px;
 }
 .modalFooter {
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   height: 100rpx;
   border-top: 1px solid #e5e5e5;
   font-size: 32rpx;
   line-height: 100rpx;
 }

 .btnConfirm {
   font-size: 32rpx;
   width: 100%;
   color: #508cee;
   text-align: center;
 }
.guide_img{
  margin: 0 auto;
  width: 640rpx;
  height: 768rpx;
}

 

参考文章地址:

原文:https://www.cnblogs.com/lpp-11-15/p/12857216.html

文章分类
代码人生
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐