当前博客:自制常用UI-遮罩层

202 次浏览【转载需注明来源】


有时候在一个页面中可以呈现的小内容,不需要再写一个页面,可以用一个遮罩来解决,遮罩DIV一个问答窗口,或者你直接当他是一个可以帮你完成小功能设计的的小窗口

话不多说 , 开搞

 

页面部分:

<页面>
	<区块>
	      <区块 类名="遮罩" 条件隐藏显示="数据层.可视" >我是一个遮罩,可以当做一个弹出小窗口</区块>
	      <按钮 按钮样式="默认"  @绑定事件_单击="方法层.显隐遮罩()">点击显隐遮罩</按钮>
	</区块>
</页面>
Markup

需要一个条件隐藏显示来控制遮罩的显隐

按钮绑定事件,这个事件来修改控制遮罩层显隐的信号变量

 

脚本部分:

<脚本>
	局部变量 数据层 = {
		//所有的页面数据,请在本处定义
		可视:假,
	};
</脚本>
<脚本>
	局部变量 方法层 = {
		//所有页面方法,请在本处定义
		显隐遮罩: 定义函数(){
		    数据层.可视 = !数据层.可视
		}
	};
</脚本>
Markup

先声明 可视 这个信号量的值,一般情况下这个遮罩层是先隐藏起来的,在需要的时间才召唤他出来.

所以,我们声明一个方法  把 可视 这个信号量取反  (加 ! 就是取反)

 

最后样式层:

<样式>
	.遮罩{
	    堆叠顺序: 999;   
	    背景-颜色: 颜色通道(0,0,0,0.3);
	    边框-圆角: 20rpx;
	    宽度: 80%;
	    高度: 80%;
	    定位:绝对定位;
	    顶部: 10%;
	    左侧: 10%;
	}
</样式>
Markup

其他没什么好说的,就这个堆叠顺序,设置为999 就能让这个遮罩在页面的最高处,出现时不会点击到其他东西

自制常用UI-遮罩层