微信小程序中遮罩层的实现

本文总结了在微信小程序中实现遮罩层的四种方法,包括点击触发、关闭逻辑以及不同布局下的实现方式。针对内容超过一屏时出现的遮罩层滚动穿透问题,作者提出这是一个待解决的技术点。
摘要由CSDN通过智能技术生成

近期在写一点小东西,碰到遮罩层,今天把它总结下来,方便大家共同学习:

有好几种方法,今天先来第一种。

 

 

准备工作:

一张图片:close.png 

 

 

一、方法1

先上效果

 点击“核算”以后,遮罩层出现,同时conts(即面板)出现。再次点击“核算”或conts右上角的关闭按钮时,遮罩层消失,conts隐藏。

 

 源码:

wxml代码

<view class="wrap">  
    <!------------------------------------------------------------------------1  -->
    <!--页面内容区  -->
    <view class="txts">页面内容->根据自己需求陈列</view>   
    <!------------------------------------------------------------------------2  -->
    <!-- 底部固定栏 -->
   <view class="submit">  
        <!--左边  -->  
        <view class="submitL">  
             <text class="all">¥666</text>  
             <view class="mingXi">  
                  <!--2种切换时的状态(此处指“明细”)  -->  
                  <view class="hide{
  {showView? '' : 'show'}}" bindtap="change">{
  {showView?'核算':'核算'}}</view>      
                  <view class="hide{
  {showView? 'show' : ''}}" bindtap="change">{
  {showView?'核算':'核算'}} </view>      
             </view>  
        </view>    
        <!--右边  -->  
        <view class="submitR">提 交</view>  
    </view>  
    <!---------------------------------------------------------------------------3  -->
    <!--一开始showView的状态  -->  
    <!--在js中,一开始将showView设为true, 通过showView?'':'show'得知一开始showView处于隐藏站状态,
    当然你也可以将showView设为false,只需将下面的  
    showView?'':'show'改为showView?'show':''也一样,表示页面载入时showView是隐藏的  -->
   <view class="hide{
  {showView?'':'show'}}">  
       <!--遮罩层  -->
       <view class="shade">  
           <!--面板内容  -->
           <view class="conts">  
                这里面的内容根据自己的需求进行详细的编写。。。。。。。  
                <!--右上角的关闭按钮(用于关闭整个conts)  -->  
                <image class="closeImg" src="../../images/close.png" bindtap="close"></image>  
           </view>   
       </view>  
   </view>    
</view>  

 

wxss代码

 

.wrap{    
  width: 750rpx;  
  height: auto;    
  font-size: 34rpx;    
}    
/*--------------------------------------------------------------------1  */
.txts{      
  height: 1600rpx;    
}    
/*---------------------------------------------------------------------2  */
.submit{   
  height: 120rpx;  
  display: flex;  
  flex-direction: row;  
  line-height: 120rpx;  
  position: fixed;   
  left: 0;  
  bottom: 0;   
  /*要显示在遮罩层shade的上面 */   
  z-index: 2;  
  }  
/*左边 */  
.submitL{   
    width: 510rpx;   
    background-color: white;  
    border-top: 1rpx solid gainsboro;   
    }  
.all{  
    font-size: 36rpx;   
    color: #FF
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值