小程序弹窗实例
小程序弹窗口,有基本的 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; }