小程序彈窗實例

小程序彈窗口，有基本的  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;
}