微信小程序自定义弹窗实现详解(可通用)主要介绍了微信小程序自定义弹窗实现详解(可通用),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下本文为自定义弹窗,该内容可满足如下需求:自定义各种布局弹窗点击弹窗布局外消失弹窗弹出弹窗时背景阴影半透明各方向弹出效果(本文为自下而上弹出)话不多说,先上图看效果:点击昵称旁边的编辑按钮弹出自定义弹窗上图是我自己拙劣的审美自定义的一个编辑弹窗,因为重点是自定义弹窗,所以在下文的通用代码中我就去掉了这些布局,剩下填充部分由读者自行填充
下面上代码,老规矩,还是微信小程序对应的几个文件的代码,可直接贴到页面里用的哦
wxml文件中直接放到wxml的最底部就行了,十分简练
此处是填充的布局代码
wxss文件中直接放进去就行,根据注释可自行调节弹框带不带阴影
zan-dialogmask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;background:rgba(0,0,0,0);//设置阴影半透明背景如:background:rgba(0,0,0,0
4);display:none;}
zan-dialogcontainer{position:fixed;bottom:400rpx;width:650rpx;//弹窗布局宽height:350rpx;//弹窗布局高,与下面弹出距离transform有关margin-left:50rpx;background:#f8f8f8;transform:translateY(300%);//弹框弹出距离,与弹框布局高度有关,如300%表示弹起距离为3倍弹窗高度transition:all0
4sease;z-index:12;border-radius:20rpx;box-shadow:0