酱紫的效果。
第一步:添加遮罩层。使用position赋值z-index
第二步:禁止底部列表滚动
第三步:点击遮罩层列表收回
做法详细思路
第一步
我在整个整改页面加了一个遮罩层,而遮罩层的判断变量与下拉列表的判断变量是一致的,因此页面初始加载,整改列表也被隐藏了
于是我将marks(遮罩层)放在了这个位置1,但是他占了位置,我需要将他脱离文档流这样才能将他悬浮在列表之上。所以我开始用position:absolute,position:relative。但是尝试多次列表信息都在遮罩层之上。于是我看资料说。父级设置relative,不需要设置z-index,子级absolute,设置z-index=-1这样就将自己遮盖,而我试过之后依旧不好使。我以为是我组件中使用了relative因此不好使。但是并不是。
后来我将整个页面设置了relative,marks和组件分别设置了absolute,marks的z-inde设置99依旧在列表之下。后来我将列表组件改为z-inde=2就好了。
第二步
禁止底部滚动,因为marks设置absolute,所以需要给固定的高度,一滚动就滚动到下边数据了。开始我使用小程序的catchtouchmove,说的可好了,用起来就好使。结果我用了完全不好使,说是什么穿透之类的,所以pass掉。
又开始使用scroll-view,scroll-y=false,因为组件使用的absolute脱离了文档流,所以我需要设置scroll的高度,但是在父级就需要获取到子组件的页面高度,但是初始化子组件的attache函数根本获取不到节点,所以我又放弃了。我又试着把scroll-view放到子组件中,但是子组件不动,父组件还是会动,因为父组件被子组件撑了起来。所以又放弃了
最后使用了position:fixed,动态给position,如果遮罩层出现就给position:fixed。完美解决
第三步
给marks一个点击事件。但是需要子组件中的是否显示,显示哪个页面的判断值。
将子组件的改变值传回父页面。这是显示marks。
但是要是撤回marks我还需要调用子组件关闭遮罩层的函数