小程序 自定义弹窗

小程序提供了丰富的交互API，如wx.showToast、wx.showModal，但有时并不能满足我们的需求，这篇博文提供了一个实现自定义弹窗的思路。

结合一个简单案例，看下最终的效果：

我们要做的事情是，点击按钮时，弹窗出现，弹窗以外的区域变成透明，点击此区域，弹窗消失，弹窗中也可设置取消按钮。

 

实现思路：弹窗和背景（灰色区域，铺满整个页面）都占据标签，用if控制该区域是否显示，点击按钮时，两片区域显示，用z-index标签设置堆叠顺序，我将背景的z-index值设为1，弹窗设置为2，这样背景就在原来页面之上，而弹窗又在背景之上。背景绑定一个点击方法，此方法会使得弹窗和背景同时消失。这里的逻辑设计比较简单，css样式相对复杂一些。

 

wxml

<view>

  <button bindtap="show">弹窗出现</button>

  <view wx:if="{{ popover }}" class="back" bindtap="hide"></view>

  <!-- 弹窗内容 -->
  <view wx:if="{{ popover }}" class="popover">
    在这里编写自定以弹窗内容
  </view>
</view>

wxss

.back {
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
}

.popover {
  z-index: 2;
  border-radius: 10rpx;
  width: 400rpx;
  height: 400rpx;
  background-color: white;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 400rpx;
  justify-content: center;
} 

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    popover: false,
  },

  show: function (e) {
    this.setData({
      popover: true
    })
  },

  hide: function (e) {
    this.setData({
      popover: false
    })
  }

  
})

通过变量 popover 控制弹窗的显示和隐藏