需求:因为单选按钮实际中展示的数据较多,微信提供的不能满足需要。所以自定义一个组件。考虑使用page-container。page-container在页面中只能有一个,做成组件也不行么?
结构:formSelect:是自定义组件,里边放多个selectText。也就是单选按钮。
selectText:自定义组件,展示选中的文本。分为三部分:1.标题,2.选中文本,3. >,点击滑出选择项 page-container。
selectPage: 自定义组件,page-container放到了selectPage中。
问题:就这样,我再formSelect中放了两个selectText 组件。然后点击> ,第一个能出来page-container。第二个就不行了。这样的问题怎么解决?
参考https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html
<page-container bind:leave="onLeave" wx:if="{{visible}}" show="{{visible}}">
onLeave 把visible改成false
可以在每个page页的最外层套用一个公共组件wrap,在这个公共组件wrap中定义page-container的弹窗逻辑,所有需要要通过弹窗展示的内容使用插槽加载到wrap中的page-container中,如果要实现多个不同的弹窗展示,只需要wx;if 控制插槽展示不同的内容即可