微信小程序实现一个遮罩层

微信小程序实现遮罩层

开发中，遮罩层的使用场景很多，例如，loading的时候、例如搜索的时候等。

以下是一个案例：点击页面的搜索框，在页面上添加一层遮罩层，显示搜索详情页

页面搜索框如下：

页面最上面有一个搜索框，下面有一些其他UI元素

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

遮罩层

<view class="detail-container" hidden="{{searchHide}}" catchtouchmove="prevent">
    <view style="width: 100%; background-color: white;">
        <van-search class="search-detail" isFocus="{{!searchHide}}" value="{{ value }}" placeholder="搜索" show-action bind:search="doSearch" bind:cancel="onCancel"/>
    </view>
    <view class="hotCell" hidden="{{searchHide}}">
        <view class="hotCell-title">热门标签</view>
        <view class="hotCell-text">
            <block wx:for="{{hotSearchList}}" wx:key="index">
                <view class="itemCell" bindtap="itemClick" id="{{index}}" data-key="{{item}}">
                    <text class="item">{{item}}</text>
                </view>
            </block>
        </view> 
    </view>
</view>

需求是，点击首页上的搜索框，弹出遮罩层搜索，页面如下：

最主要的是css样式设置

.detail-container {
    position: fixed;
    top: 0; 
    z-index: 999;
    height: 100%;
    width: 100%;
    background-color: rgb(0, 0, 0, 0.3);
}
...
...

逻辑层主要代码如下：

    searchbarClick(){
        this.setData({
          searchHide: false,
        })
    },

点击首页搜索框时，将遮罩层显示出来即可。