小程序自己实现的跳出层模式解读!

一:先把对应的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 });
}

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

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/tongxinshuyu/article-121351-1.html