微信小程序自定义弹窗实现详解(可通用）

1.需求分析

在小程序中，有时候需要弹出一个自定义样式的弹窗，以提示用户或获得用户的确认。

2.实现过程

2.1 自定义组件

首先，在小程序中我们需要创建一个自定义组件，用于承载弹窗的内容。在组件的 wxml 文件中，可以编写弹窗的样式和内容。

<!-- 弹窗组件 -->
<view class="popup-container" catchtouchmove="{{true}}" wx:if="{{show}}">
  <!-- 背景层 -->
  <view class="popup-mask"></view>

  <!-- 弹窗主体部分 -->
  <view class="popup-content">
    <slot></slot>
  </view>
</view>

<!-- 弹窗样式 -->
<style>
  .popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
  }

  .popup-content {
    position: relative;
    width: 85%;
    background-color: #fff;
    border-radius: 4rpx;
    padding: 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.16);
  }
</style>

2.2 在页面中调用组件

在使用自定义弹窗的页面中，需要引入自定义组件，并通过一定的状态控制来控制弹窗的显示和隐藏。

首先，在页面的 json 文件中声明使用的自定义组件：

{
  "usingComponents": {
    "popup": "../../components/popup/popup"
  }
}

然后，在页面的 wxml 文件中使用组件，并绑定显示状态：

<view>
  <button bindtap="showPopup">显示弹窗</button>

  <popup show="{{showPopup}}" bindtapmask="hidePopup">
    <view>这是弹窗的内容</view>
  </popup>
</view>

在页面的 js 文件中，需要声明控制弹窗显示状态的变量及方法：

Page({
  // 控制弹窗显示状态的变量
  data: {
    showPopup: false
  },

  // 显示弹窗
  showPopup: function () {
    this.setData({
      showPopup: true
    });
  },

  // 隐藏弹窗
  hidePopup: function () {
    this.setData({
      showPopup: false
    });
  }
});

2.3 自定义组件的事件绑定

在自定义组件中，我们可以通过定义事件属性，在组件外部向组件内部传递事件。这样就可以在组件中响应事件，并进行相应的操作，比如关闭弹窗。

在弹窗组件的 wxml 中，定义事件属性 bindtapmask：

<view class="popup-mask" bindtap="hide">

在弹窗组件的 js 文件中，声明事件响应方法 hide，并触发自定义事件：

Component({
  properties: {
    // 控制弹窗显示状态的属性
    show: {
      type: Boolean,
      value: false
    }
  },

  methods: {
    // 点击弹窗背景层，触发关闭弹窗事件
    hide: function () {
      this.triggerEvent('tapmask');
    }
  }
});

最后，在页面中使用自定义组件时，绑定自定义事件并定义响应方法：

<view>
  <button bindtap="showPopup">显示弹窗</button>

  <popup show="{{showPopup}}" bindtapmask="hidePopup">
    <view>这是弹窗的内容</view>
  </popup>
</view>

// 隐藏弹窗
hidePopup: function () {
  this.setData({
    showPopup: false
  });
}

这样就可以在点击弹窗背景层时，调用 hidePopup 方法，关闭弹窗了。

3.示例说明

示例一：确认弹窗

在小程序中，我们可以通过自定义弹窗来实现确认弹窗的功能。以下是一个简单的确认弹窗的实现：

<view>
  <button bindtap="showConfirm">弹出确认框</button>

  <popup show="{{showConfirm}}">
    <view>
      <text>确定要删除该记录吗？</text>
      <button bindtap="confirmDelete">确定</button>
      <button bindtap="hideConfirm">取消</button>
    </view>
  </popup>
</view>

Page({
  data: {
    showConfirm: false // 控制弹窗显示状态的变量
  },

  showConfirm: function () {
    this.setData({
      showConfirm: true
    });
  },

  hideConfirm: function () {
    this.setData({
      showConfirm: false
    });
  },

  confirmDelete: function () {
    // 调用删除记录的接口
    // ...

    this.hideConfirm();
  }
});

示例二：输入弹窗

在小程序中，我们可以通过自定义弹窗来实现输入弹窗的功能。以下是一个简单的输入弹窗的实现：

<view>
  <button bindtap="showInput">弹出输入框</button>

  <popup show="{{showInput}}">
    <view>
      <input placeholder="请输入" value="{{inputValue}}" bindinput="inputChange"/>
      <button bindtap="confirmInput">确定</button>
      <button bindtap="hideInput">取消</button>
    </view>
  </popup>
</view>

Page({
  data: {
    showInput: false, // 控制弹窗显示状态的变量
    inputValue: '' // 输入框的值
  },

  showInput: function () {
    this.setData({
      showInput: true
    });
  },

  hideInput: function () {
    this.setData({
      showInput: false
    });
  },

  inputChange: function (e) {
    this.setData({
      inputValue: e.detail.value
    });
  },

  confirmInput: function () {
    // 获取输入框的值
    var inputValue = this.data.inputValue;

    // 调用接口
    // ...

    this.hideInput();
  }
});

4.总结

通过自定义组件和一定的状态控制，小程序中的自定义弹窗实现起来并不困难。而且，自定义组件可以在多个页面中复用，大大提高了代码的复用率，也方便了日后的维护。