Wechat applet implements a mask layer

Wechat applet implements mask layer

In development, there are many usage scenarios of the mask layer, for example, when loading, when searching, etc.

The following is a case: click the search box and add a mask layer:

wxml:

<view class="searchView" hidden="{
     
     {searchHide}}">

</view>

<view class="searchbarView">
    <view class="searchbar" bindtap="searchbarClick">
        <image class="searchIcon" src="/images/Search-gray.png"></image>
        <text class="searchText">搜索</text>
    </view>
</view>

searchView is the mask view layer. It is to cover the upper layer of the search box. It is hidden at the beginning. When the search box is clicked, the mask layer is displayed on the upper layer of the search box.

index.js

Page({
    
    
  data: {
    
    
    searchHide: true
  },
  searchbarClick(){
    
    
      console.log("searchbar did click")
      this.setData({
    
    
        searchHide: false
      })
  }
})

.searchbarView {
    
    
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    /* background-color: aqua; */
}
.searchbar {
    
    
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 100%;
    border-radius: 32px;
    margin-left: 16px;
    margin-right: 16px;
    background-color: #eeeeee;
}
.searchIcon {
    
    
    width: 14px;
    height: 14px;
}
.searchText {
    
    
    margin-left: 3px;
    font-size: 12px;
    color: #b2b2b2;
}

.searchView {
    
    
    width: 100%;
    height: 100%;
    background-color: black;
}

Realize the effect: