小程序遮罩层

时间：2019-08-10 12:08:15 阅读：119 评论：0 收藏：0 [点我收藏+]

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

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

  },


})

小程序遮罩层

原文：https://www.cnblogs.com/yite/p/11330976.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)