微信小程序实现遮罩层
开发中，遮罩层的使用场景很多，例如，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);
}
...
...
逻辑层主要代码如下：文章来源：https://www.toymoban.com/news/detail-422406.html
searchbarClick(){
this.setData({
searchHide: false,
})
},
点击首页搜索框时，将遮罩层显示出来即可。文章来源地址https://www.toymoban.com/news/detail-422406.html
到了这里，关于微信小程序实现一个遮罩层的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
