小程序遮罩层

2023-11-06 09:26:34

现在有一个需求，要求用户点击邀请按钮时能弹出一个遮罩层，使用户只能在遮罩层内操作，当用户点击取消按钮或者遮罩层内空白处的时候遮罩层就会消失，刚开始想复杂了，同事点拨一下之后发现其实并不难实现，很简单的一个功能，现将代码贴出

wxml

邀请按钮

 <view class="myOrderItemCysc" style=‘background-color:unset;‘>
        <button  bindtap=‘chooseShare‘ style=‘width:100%;height:100%;margin:0;‘>
          邀请好友成为团长
        </button>
    </view>

遮罩层

<view bindtap=‘chooseShare‘ hidden=‘{{hideShare}}‘ style=‘position:fixed;top:0;bottom:0;right:0;left:0;background-color:#333333d1;‘>
    <button bindtap=‘onShareAppMessage‘ style=‘display:flex;align-items:flex-end;align-content:center;‘>发送给微信好友</button>
    <buttonstyle=‘display:flex;align-items:flex-end;align-content:center;‘>分享到朋友圈</button>
    <button bindtap=‘chooseShare‘ style=‘display:flex;align-items:flex-end;align-content:center;‘>取消</button>
</view>

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
      })
    }

  },


})

小程序遮罩层

码农公寓

相关文章