微信小程序实现遮罩层
微信小程序实现遮罩层
开发中,遮罩层的使用场景很多,例如,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,
})
},
点击首页搜索框时,将遮罩层显示出来即可。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfikac
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01