小程序自己实现的弹出层思路解析

2019/4/1 12:21:10 | 阅329 来源:好空间网络 [打印] [关闭]
 

一:先把对应的view写好

这里有几个地方要注意 

1:第一层view 他的宽度应该是750rpx 高度100%; 背景颜色应该是rgba(0,0,0,0.5) 黑色半透明 positon必须为flxed top:0

.yunkadiv{
width: 750rpx;
height: 100%;
background-color:rgba(0, 0, 0, 0.6);
position:fixed;
z-index: 2000;
top: 0px;
}

2:第二层view 我定义他宽度710rpx, 高度500rpx, margin:200rpx 20rpx 20rpx 20rpx; 给200是因为要把第二层往下来一点 左右给20rpx;白色背景

.yunka-color{
background-color:#ffffff;width:710rpx;margin:200rpx 20rpx 20rpx 20rpx;height:500rpx;
position: relative;
}

第二层的view里可以写任意意东西

给出所有view的代码

<view wx:if="{{show2}}"  class='yunkadiv'>
<view class="yunka-color" >
<view class='yunka-close' bindtap="onClose2"><image src="close.png" style="width:32rpx;height:32rpx;" /></view>
<form bindsubmit="formSubmit" >
<view class='sqyunka'> 申请云卡 </view>        
<view class='yunkalist'>
<view class='yunkatext'>
<input name='name' type='text' placeholder="姓名" class='yunkainput'/>
</view>
<view class='yunkatext'>
<input name='phone' type='text' placeholder="电话" class="yunkainput" />
</view>
</view>

<view class='yunkalist'>
<view class='yunkatext'>
<input name='address' type='text' placeholder="小区" class='yunkainput'/>
</view>
<view class='yunkatext'>
<input name='zhucai' type='text' placeholder="所需主材" class="yunkainput" />
</view>
</view>
<view class='sqyunka'><button class='yunkabutton' type='primary' form-type="submit">申请云卡</button></view>
</form>
</view>  
</view>

第一层view里要有个判断,判断show2的属性是否为true 为true 则显示,否则不显示,可以在data里设置show2默认为false



在给个按钮或者view 让用户点击后 可以唤出这个遮罩层

<view class='di lfooter yunkaback' bindtap='togglePopup2' >申请云卡</view>

我这里用的是view 定义了 togglePopup2 事件,在小程序的js文件里面,设置 事件 控制show的值为true

/**申请云卡 */
togglePopup2:function() {
this.setData({ show2: true });
},
/**云卡关闭 */
onClose2() {
this.setData({ show2: false });
}

这样就可以实现一个完美的弹出遮罩层了...

经营许可证ICP:皖B2-20100052 公司邮箱:zcdnsz@jspkongjian.net
Copyright © 2004-2015, 安徽好空间网络科技有限公司 版权所有 , 本站素材部分来源于网络,如有侵权请告知删除。