微信小程序原生弹窗组件:page-container

追格官方小助手/ 2022年04月11日/ 小程序/ 浏览 5511

开发实践中,比较复杂的页面设计中,经常会需要弹窗才能满足需求。借助js+css设计实现各种各样的弹窗,似乎也并不是很难。


但是,用js+css模拟的弹窗,其突出的问题在于“并不是真正的弹窗”。当用户进行返回操作会直接离开当前页面,不符合用户预期,预期应为关闭当前弹出的组件。


好消息是:微信小程序现在已经支持原生弹窗组件了:page-container。


page-container的长得像一个弹出窗口,但是其表现得却像一个页面。当用户进行返回操作,关闭该容器而不关闭页面。返回操作包括三种情形,右滑手势、安卓物理返回键和调用 navigateBack 接口。


page-container支持的属性丰富:动画、层级、遮罩、位置、圆角等,都有考虑到。更详细的介绍:https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html


page-container 和 share-element 结合使用还可以很方便的制作出类似 flutter hero 的动画。


使用时需在当前页放置 share-element 组件,同时在 page-container 容器中放置对应的 share-element 组件,对应关系通过属性值 key 映射。当设置 page-container 显示时,transform 属性为 true 的共享元素会产生动画。当前页面容器退出时,会产生返回动画。更详细的介绍:https://developers.weixin.qq.com/miniprogram/dev/component/share-element.html


暂时未发现其他平台的小程序支持此类组件。


不得不说,虽然各个大厂都推出了小程序,但是现在发展z好的,也z用心的还是微信小程序。其他平台对待小程序感觉就像是对待一个“KPI项目”……

发表评论

暂无评论,抢个沙发...

客服 工单