微信小程序中自定义模态弹窗的示例分析 - 行业资讯 - 肥雀云

　　介绍

这篇文章给大家分享的是有关微信小程序中自定义模态弹窗的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

首先看看官方提供的模态弹窗,供大家参考,具体内容如下

<强>示例:

这样的模态弹窗,充其量只能做个提醒,提示一下信息。
但是并不能使用它来处理复杂性的弹窗业务,因此写了迈克尔从新自定义了一个,采用了仿原生的样式写法

wxml:

& lt; !——按钮——祝辞, 　　& lt; view 类=癰tn", bindtap=皃owerDrawer", data-statu=皁pen"祝辞button, 　　, 　　& lt; !——面具祝辞, 　　& lt; view 类=癲rawer_screen", bindtap=皃owerDrawer", data-statu=癱lose",天气:如果=皗{showModalStatus}}“祝辞& lt;/view>, 　　& lt; !——内容的在, 　　& lt; !——使用动画属性指定需要执行的动画——在, 　　& lt; view 动画=皗{animationData}}“,类=癲rawer_box",天气:如果=皗{showModalStatus}}“祝辞, 　　, 　　,& lt; !——drawer 内容——祝辞, 　　,& lt; view 类=癲rawer_title"在弹窗标题& lt;/view>, 　　,& lt; view 类=癲rawer_content"祝辞, 　　,& lt; view 类=皌op grid"祝辞, 　　,& lt; label 类=皌itle col-0"在标题& lt;/label>, 　　,& lt; input 类=癷nput_base input_h40 col-1", name=皉Name",价值=https://www.yisu.com/zixun/笨勺孕卸ㄒ迥谌?> 　　　　<视图类=暗缤? 　　<标签类="标题col-0 ">标题> 　　　　<视图类=暗缤? 　　<标签类="标题col-0 ">标题> 　　　　<视图类=暗缤? 　　<标签类="标题col-0 ">标题> 　　　　<视图类="顶部底部网格”> 　　<标签类="标题col-0 ">备注> 　　　　　　<视图类=" btn_ok“bindtap=皃owerDrawer”data-statu="关闭">确定　　

wxs:

/*按钮*/, 　　{.btn 　　,宽度:80%,, 　　,填充:20 rpx 0;, 　　,这个特性:10 rpx;, 　　,text-align:,中心; 　　,保证金:40 rpx 10%,, 　　背景:大敌;# 000;, 　　,颜色:# fff;, 　　}, 　　,/*屏蔽*/, 　　{.drawer_screen 　　,宽度:100%,, 　　,身高:,100%; 　　,位置:,固定; 　　,:,0; 　　,左:,0; 　　,z - index:, 1000; 　　背景:大敌;# 000;, 　　,不透明度:,0.5; 　　,溢出:,隐藏; 　　}, 　　,/*内容*/, 　　{.drawer_box 　　,宽度:650 rpx;, 　　,溢出:,隐藏; 　　,位置:,固定; 　　,:,50%; 　　,左:,0; 　　,z - index:, 1001; 　　,背景:# FAFAFA;, 　　,保证金:-150 px 50 rpx 0, 50 rpx;, 　　,这个特性:3 px;, 　　}, 　　, 　　.drawer_title {, 　　填充:15 px;大敌; 　　,字体:20 px “microsoft yahei",, 　　,text-align:,中心; 　　}, 　　{.drawer_content 　　,身高:210 px,, 　　,overflow-y:滚动,,/*超出父盒子高度可滚动*/, 　　}, 　　, 　　.btn_ok {, 　　,填充:10 px;, 　　,字体:20 px “microsoft yahei",, 　　,text-align:,中心; 　　,border-top: 1 px solid # E8E8EA;, 　　,颜色:# 3 cc51f;, 　　}, 　　, 　　.top {, 　　,padding-top: 8 px; 　　}, 　　{.bottom 　　,padding-bottom: 8 px; 　　}, 　　{.title 　　,高度:30 px;, 　　,行高:30 px;, 　　,宽度:160 rpx;, 　　,text-align:,中心; 　　,显示:inline-block;, 　　,字体:300,28 rpx/30 px “microsoft yahei",, 　　}, 　　, 　　{.input_base 　　,边界:2 rpx solid # ccc;, 　　,padding-left: 10 rpx;, 　　,margin-right: 50 rpx;, 　　}, 　　.input_h40 {, 　　,高度:30 px;, 　　,行高:30 px;, 　　}, 　　.input_h70 {, 　　,高度:60 px;, 　　}, 　　.input_view {, 　　,字体:12 px “microsoft yahei",, 　　,背景:# fff;, 　　,颜色:# 000; 　　,行高:30 px;, 　　}, 　　, 　　{input 　　,字体:12 px “microsoft yahei",, 　　,背景:# fff;, 　　,颜色:# 000,,, 　　}, 　　{电台, 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null