小程序遮罩層效果實現

現在有一個需求，要求用戶點擊邀請按鈕時能彈出一個遮罩層，使用戶只能在遮罩層內操作，當用戶點擊取消按鈕或者遮罩層內空白處的時候遮罩層就會消失，剛開始想復雜了，同事點撥一下之后發現其實並不難實現，很簡單的一個功能，現將代碼貼出

 ps：這種效果其實可以通過 wx.showActionSheet() API實現，但我這里由於是要做分享，但onShareAppMessage（）並不支持，所以要自己做，關於 wx.showActionSheet()感興趣的可以看文檔https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showActionSheet.html

wxml

邀請按鈕

 <view class="myOrderItemCysc" style='background-color:unset;'>
        <button  bindtap='chooseShare' style='width:100%;height:100%;margin:0;'>
          邀請好友成為團長
        </button>
    </view>

 

遮罩層

<view bindtap='chooseShare' wx:if="{{hideShare}}"  style='position:fixed;top:0;bottom:0;right:0;left:0;background-color:#333333d1;display:flex;align-items:flex-end;align-content:center;'>
    <view style='width:100%;height:34vw'>
    <button  open-type="share" >發送給微信好友</button>
    <button catchtap='onShareAppMessage'>分享到朋友圈</button>
    <button catchtap='chooseShare'>取消</button>
    </view>
</view>

ps:有兩個button之所以用catchtap而不用bindtap是為了阻止穿透，用wx:if而不用hidden是因為hidden會因為一些原因失效

 

 

js

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    hideShare:true
  },

// 邀請模塊遮罩層
  chooseShare:function(){

    var that = this;

    var hides = that.data.hideShare;

    if (hides==true){
      that.setData({
        hideShare: false
      })
    } else if (hides == false){
      that.setData({
        hideShare: true
      })
    }

  },


})

 

最終效果如下