小程序popupwindow弹出框怎么实现
小编给大家分享一下小程序popupwindow弹出框怎么实现,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
目前创新互联建站已为上千余家的企业提供了网站建设、域名、雅安服务器托管、网站托管维护、企业网站设计、管城网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
小程序popupwindow弹出框的实现代码
在上方弹出
wxml
Dialog内容
wcss
.zan-dialog__mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; background: rgba(0, 0, 0, 0.4); display: none; } .zan-dialog__container { position: fixed; top: 0; width: 750rpx; background: white; transform: translateY(-150%); transition: all 0.4s ease; z-index: 12; } .zan-dialog--show .zan-dialog__container { transform: translateY(0); } .zan-dialog--show .zan-dialog__mask { display: block; }
js
Page({ data: { showDialog: false },//控制 pop 的打开关闭 toggleDialog() { this.setData({ showDialog: !this.data.showDialog }); }, })
在下方弹出
wxml
Dialog内容
wcss
.zan-dialog__mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; background: rgba(0, 0, 0, 0.4); display: none; } .zan-dialog__container { position: fixed; bottom: 0; width: 750rpx; background: white; transform: translateY(150%); transition: all 0.4s ease; z-index: 12; } .zan-dialog--show .zan-dialog__container { transform: translateY(0); } .zan-dialog--show .zan-dialog__mask { display: block; }
js
Page({ data: { showDialog: false },//控制 pop 的打开关闭 toggleDialog() { this.setData({ showDialog: !this.data.showDialog }); }, })
看完了这篇文章,相信你对“小程序popupwindow弹出框怎么实现”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
当前文章:小程序popupwindow弹出框怎么实现
文章链接:http://scyanting.com/article/gsegjs.html