在开发这个小弹窗时，想到了用WeUI中的的半屏弹窗，不想重复造轮子。但还是遇到不少小问题。
1、底部有一大段的空白。这个地方按照WeUI的设计，应该是要放操作按钮的。但是我们没有，所以就留下来一大段的空白。可以使用以下方法
外部样式类取名为weui-half-screen-dialog
.weui-half-screen-dialog {
margin-bottom: -100rpx !important;
}
或者
.weui-half-screen-dialog .weui-half-screen-dialog__ft{
display: none !important;
}
2、右上角有个关闭按钮，但是发现点击时无反应。
仔细查看下，发现这里面有个更多按钮，虽然看不到，但却是是影响到了关闭按钮的点击。虽然文档没有相关属性或方法来隐藏那个按钮，但可以通过外部样式类，然后找到这个更多按钮的class.然后进行样式设置。
.weui-half-screen-dialog .weui-half-screen-dialog__hd__side{
display: none !important;
}
3、自定义组件中使用half-screen-dialog无法使用外部样式类。
为了将上述的弹窗更方便的调用，封装了组件。但是发现一个问题，外部样式类在组件中是无法正常使用的。
也就是说在组件的wxss中无法正常使用.weui-half-screen-dialog 这个外部样式类，然后看层级结构直接使用.weui-show .weui-hale-screen-dialog来设置样式 也是无效的，因为这些样式是在#shadow-root中，虽然了解的不深，但应该也是类似于虚拟节点，无法直接修改他的样式。
无奈只能在Page.wxss中使用.weui-hale-screen-dialog进行样式的修改。但是这个已经违背了组件的意义，组件就是为了复用，或者拆分代码。如果还需要调用方在wxss中写上这么个设置样式的代码，很不好。
最后发现虽然无法直接使用 #shadow-root中的class进行样式的设置。但是我可以给 half-screen-dialog 加上一个class。 然后通过class 进行枚举里面的view. 以此来实现对响应的view的样式进行设置。
比方说要实现以下效果：隐藏头部(weui-half-screen-dialog__hd) 跟 底部(weui-half-screen-dialog__ft)的内容。
设置class为dialog.显示隐藏里面所有的子view，然后显示第二个子view，因为 weui-half-screen-dialog__bd刚好就在第二个位置。
因为css这种枚举的方法，会将里面所有的子view都隐藏，所以单单只显示weui-half-screen-dialog__bd还不够，还需要将weui-half-screen-dialog__bd中的子view都显示出来。 也不知道这么写是不是最好的方法，翻了下css选择器文档只看中了方法。
当然上面的效果，还需要加上一些代码，比如设置阴影、外边距、圆角。 注意设置了margin,在隐藏的时候需要还原下。不然隐藏时底部还会显示出一点点弹窗。
其实做到这里发现使用half-screen-dialog 已经有点绕弯子了，还不如直接使用view 来进行写。自己加阴影层，加动画。但是有以下原因让我放弃了使用view
1、使用view，需要在外部对这个组件设置一些样式，比如display:fixed,距离底部的高度。如果使用上面的方法的话，就不需要了。
2、这么纠结于使用half-screen-dialog 归根到底还是一种执念，花了好几个小时，把这个玩熟了，就放弃有点不爽。最关键的是这个玩熟以后能解决之前封装的picker组件问题。
封装hf-picker选择器。因为自带的picker在iOS 、安卓上显示的样式不一致，产品测试提出个能不能样式弄成一致。想系统提供了picker-view这个，应该是没问题的。
自己对这个组件的要求就是：无缝衔接，引入组件后，直接将 pciker 标签名替换为 hf-picker就行，其他的属性、事件都保持一致。
一番操作以后，发现在层级不复杂的页面效果很不错，但是在一些view嵌套view嵌套的很深，比如里面已经有非statics的父view时，那么这个选择器的弹窗显示的位置就不对了。同事说这个通过view肯定是实现不了，毕竟父view范围就那么大，除非把选择器view放到page里面去 。这个方案是可以实现，但是违背了封装的原则。同事说试试half-screen-dialog，发现提供的Slot效果达不到UI要求.
如今有方法对half-screen-dialog的内部元素样式进行设置了，赶紧搞起。 最终结果还是挺好的。
