小程序弹窗实例

小程序弹窗口，有基本的  wx.showToast ，可是这个只是相当于一个平常的高级版的 alert， 其中并不能携带很多信息，或进行很多的交互。

 

如果业务要求，需要一个比较复杂的弹框提醒，或者需要一个弹框出来一个form 来填写一些信息进行提交的话，显然 wx.showToast 就不足以完成我们的需求了。

 

此时需要的是充分利用，小程序的 wx:if ，eg:  <view wx:if="{{showMask}}"></view> ，来控制遮罩层是否出现。其余的就是页面呈现的事情了。

 

ps: 虽然有遮罩层，不过由于事件的冒泡，会导致，拖动的时候，遮罩层被拖动，所以需要在所有蒙版层把touchmove事件catch住，停止其向上冒泡。在小程序中使用  catchtouchmove  属性， eg:  catchtouchmove="onPreventTouchMove" 

 

至此，小程序弹窗就可以完美的呈现了。

 

实例如下：

index.wxml

<block wx:if="{{showMask}}">
    <view class="mask-view" catchtouchmove="onPreventTouchMove"></view>
    <view class="popup-view" catchtouchmove="onPreventTouchMove">
        <view class="popup-content-view">
            <text class="hint-title-text">弹窗成功</text>
            <text class="hint-content-text">顺利弹出窗口！</text>
        </view>
        <text class="confirm-button-text" catchtap="tapConfirmButton">确定</text>
    </view>
</block>

 

index.wxss

/* 遮罩的样式 */
.mask-view {
    top: 0;
    left: 0;
    position: fixed;
    opacity: 0.5;
    background-color: #000;
    width: 100%;
    height: 100%;
}

.popup-view {
    position: fixed;
    background-color: #fff;
    border-radius: 12rpx;
    left: 60rpx;
    top: 237rpx;
    width: 630rpx;
    height: 630rpx;
    text-align: center;
}

.popup-content-view {
    margin: 0 63rpx 0 63rpx;
}

.hint-title-text {
    display: block;
    color: #000;
    font-size: 36rpx;
    font-weight: 500;
    margin-bottom: 55rpx;
}

.hint-content-text {
    display: block;
    color: #555;
    font-size: 30rpx;
    text-align: left;
}

.confirm-button-text {
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    font-size: 36rpx;
    height: 100rpx;
    line-height: 100rpx;
    font-weight: 500;
    border-top: 1rpx solid #b5b5b5;
}