微信小程序 遮罩层 demo

原理：控制 view 的显示隐藏

为啥要研究这个东西？

上代码

<view class="mask" wx:if="{{mask}}"></view>

<view class='search'>
    <input type='text' confirm-type="search" bindfocus="ineye" bindblur="outeye"></input>
    <view class="search-bot" wx:if="{{searchWord === '搜索'}}" bindtap="onSearch" >搜索</view>
    <view class="search-bot" wx:else hover-class="none" bindtap="searchNoValue">取消</view>
</view>

.mask {
  background-color: rgb(0, 0, 0, 0.9);
  position: fixed;
  top: 55px;
  left: 0;
  width: 100%;
  height: 100vh;
}

Page({
  data: {
    mask: false, // input 搜索框聚焦时遮罩层
  },

  ineye: function () {
    this.setData({
      mask: true,
    });
  },

  outeye: function () {
    this.setData({
      mask: false,
    });
  },
});