微信小程序自定义模态框，官方版本与自定义可扩展版本

微信小程序自定义模态框，官方版本与自定义可扩展版本

提示：文章最后有源码，可自取
文章主要通过模仿官方的模态框进行自定义模态框的设计，我将会先讲述原理，然后给出源码，最后指出一些需要注意的地方

---

提示：文章是自己开发过程中根据自己的理解所写，可能有错误的地方，欢迎指出

---

前言

在进行微信小程序开发的时候，我们经常会使用模态框，而官方自带的模态框对于有些场景来说，由于其限制导致满足不了需求，这时候就需要我们自定义模态框。

---

一、实现思路

模态框是通过点击后显示的让用户进行操作的组件，它主要实现的功能有：

• 点击后显示模态框主题，背景黑色半透明，同时固定
• 点击模态框操作后做出相应的操作
• 点击半透明区域后隐藏

核心代码思路：
wxml：使用wx:if="{{remark_show}}"判断是否显示模态框，同时根据事件冒泡来获取点击事件来源，也可以写多几个函数，不过写在一个函数里面更像一个主体
wxss：通过固定定位position: fixed;以及background-color: rgb(0,0,0,0.5);实现半透明，注意这里不能使用opacity，不然文字也会半透明
js：这里并没有太多特殊的地方，是比较基本的写法，有需要注意的地方已经注释了

二、相关代码

1.index.wxml

<button class="btn_test" type="primary" bindtap="showModel2">官方弹框接口</button>
<button class="btn_test" type="primary" bindtap="showModel">自定义弹框</button>

<block wx:if="{{remark_show}}">
  <view class="mo_cont" bindtap="{{modelOprate}}" data-type="modelOut">
    <view class="mo_body">
      <view class="mo_title">模态框标题</view>
      <view class="mo_content mo_padding">
        <input bindinput="{{modelOprate}}" placeholder="请输入内容" value="{{content}}" class="mo_content_input"/>
      </view>
      <view class="mo_content_oprate">
        <button class="mo_btn" data-type="cancel">取消</button>
        <button class="mo_btn" data-type="sure">确定</button>
      </view>
    </view>
  </view>
</block>

2.index.wxss

.btn_test {
  margin-top: 300rpx;
}
/* 模态框样式 */
.mo_cont {
  position: fixed;
  background-color: rgb(0,0,0,0.5);
  top: 0;
  left: 0;
  min-height: 100vh;
  width: 100vw;
  z-index: 100;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mo_body {
  width: 623rpx;
  border-radius: 32rpx;
  margin: auto;
  background-color: #fff;
  padding: 64rpx;
  box-sizing: border-box;
}
.mo_title {
  color: #84A6DD;
  font-size: large;
  margin: 16rpx 8rpx;
}
.mo_content {
  text-align: left;
  margin-bottom: 16rpx;
}
.mo_content_oprate {
  display: flex;
}
.mo_content_input {
  border: 1rpx solid #84A6DD;
  padding: 16rpx;
  margin: 32rpx;
}

3.index.js

// index.js

Page({
  data: {
    remark_show:false,//控制模态框的显示，true为显示，false不显示
    modelOprate:"modelOprate",//用字符串方式进行函数调用，实现点击事件的消除（字符串为空）
  },
  showModel(){
    //改变remark_show的值，同时渲染到页面
    this.setData({
      remark_show:true
    })
  },
  modelOprate(e){
    console.log(e);//通过打印查找需要的信息
    let type = e.type;
    let btnType = e.target.dataset.type;//按钮的点击选择
    console.log(type,btnType);//确认找到的信息
    if(btnType=="modelOut") {
      this.setData({
        remark_show:false
      });
      return;
    }
    if(type=="input"){
      this.data.content = e.detail.value;//这里不需要渲染，因为输入框的内容已经改变
      return;
    }
    if(btnType!=null){
      if(btnType=="sure"){
        console.log("点击了确定");
        console.log("输入框的内容是："+this.data.content);
      }else if(btnType=="cancel"){
        console.log("点击了取消");
      }
      this.setData({
        remark_show:false
      })
    }
    
  },
  //使用官方接口的方式
  showModel2(){
    wx.showModal({
      title: '模态框标题',
      placeholderText:"请输入内容",//有字数限制
      editable: true,
      success: (res) => {//使用箭头函数，不然this的指向有问题
        if (res.confirm) {
          console.log("点击了确定");
          console.log("输入框的内容是："+res.content);
        }else if(res.cancel){//官方建议不使用复杂逻辑
          console.log("点击了取消");
        }
      }
    })
  }
})

---

总结

文章中觉得需要细化的地方或者错误也可以提出哦，感谢观看，觉得不错点个赞呗！