微信小程序遮罩组件

组件页面代码

<view class="bumu" wx:if="{{flags}}">
  <image class="bumuimg" src="/image/jiazai.gif"></image>
</view>

组件JS代码

// components/maskView.js
Component({
    /**
     * 组件的属性列表
     */
    properties: { 
    },

    /**
     * 组件的初始数据
     */
    data: {
        flags:false,
    },

    /**
     * 组件的方法列表
     */
    methods: {
        //获取寄件人地址
        openView(e) {
            this.setData({
                flags:true
            })
        },
        closView() {
            this.setData({
                flags:false,
            })
        },
    }
})

组件页面样式

.bumu{
    display: flex;
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    right: 0;
    background: rgb(0, 0, 0, 0.3);
    height: 100vh;
    width: 100%;
    z-index: 999;
    justify-content: center;
    align-items: center;
  }
  .bumuimg{
    width: 50px;
    height: 50px;
    opacity: 0.7;
  }

页面引用

wxml:
<maskView id="maskView"></maskView>
js:
//开启
that.selectComponent("#maskView").openView();
//关闭
that.selectComponent("#maskView").closView();
json:
{
  "usingComponents": {
    "maskView":"/components/maskView/maskView"
  }
}

tips:组件请放在代码第一行

效果

加载图标链接: https://download.csdn.net/download/SubeSube/86507337