微信小程序自定义picker组件

封装hf-picker选择器。因为自带的picker在iOS 、安卓上显示的样式不一致，产品测试提出个能不能样式弄成一致。想系统提供了picker-view这个，应该是没问题的。 

一番 *** 作以后，发现在层级不复杂的页面效果很不错，但是在一些view嵌套view嵌套的很深，比如里面已经有非statics的父view时，那么这个选择器的d窗显示的位置就不对了。同事说这个通过view肯定是实现不了，毕竟父view范围就那么大，除非把选择器view放到page里面去 ,是可以实现，但是违背了封装组件的原则。同事说试试half-screen-dialog，结果发现提供的Slot效果达不到UI要求

如今有方法对half-screen-dialog的内部元素样式进行设置了，赶紧搞起。 最终结果还是挺好的。因为是dialgod出，所以不用考虑父view的范围问题了。 

所以微信d窗功能是在手机里微信App里面实现的。

微信小程序---实现d窗效果

第一步：点击按钮触发d窗事件

<button class="btn" bindtap="btn">按钮</button>

css样式btn{ position: fixed; bottom: 0; left: 0;} js，btn(){etdelshow!thisdatadelshow，consolelog(delshowhissetData({ delshow })},第二步：设置d窗的宽高为100% <view class="message" wx:if="{{delshow}}" bindtap="print"></view> css样式message{ height: 100%; width: 100%; background-color: rgba(0, 0, 0, 03); position: fixed; top: 0; z-index: 30;} jsprint(){ thissetData({ delshow : false }) },第三步：给内容的d窗设置样式。<view class="msg {{delshow 'box' : ''}}"> d窗中的内容 </view>container msg{ height: 0; width: 100%; background-color: #ffosition: fixed; z-index: 40; bottom: 0; overflow: hidden transition: all 03s; z-index: 30;}//d窗内容container box{ height: 1000rpx;}后：微信小程序简单的d窗功能实现了。

没有有官方提供关闭微信支付d窗的API接口，但你可以使用 wxgetOpenData 和 wxhideloading 来实现这个功能。

wxgetOpenData获取用户点击微信支付d窗时的反馈，如果用户关闭了微信支付d窗，wxgetOpenData会返回用户的做出的选择（取消还是确认）。接着，你就可以利用这个反馈，使用 wxhideloading 来关闭微信支付的提示框。

以上就是关于微信小程序自定义picker组件全部的内容，包括:微信小程序自定义picker组件、微信d窗功能是微信实现的还是手机实现的、微信小程序关闭微信支付d窗等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！