小程序弹窗功能如何制作?

时间：2023-07-01 14:05 阅读数：14 人阅读分类：知识百科

其实说起小程序弹窗，真的是特别有必要的，那么要想做一个，也不是一件容易的事情，需要专业人士来帮忙做。那么今天小编去咨询了一下身边做软件开发的小伙伴，给了我如下的答案！如果你也想知道，那就过来看看吧！详情请见小程序弹窗功能如何制作?

你可以用vbs脚本写,MsgBox 我记得是有三个参数的. 第一个参数就是指定有几个按钮的。下面是具体的内容。

我们首先看到的是首页代码：

.wxml的代码如下：

弹窗标题标题标题标题标题备注

.wxss的代码如下： .btn { width: 80%; padding: 20rpx 0; border-radius: 10rpx; text-align: center; margin: 40rpx 10%; background: #000; color: #fff; }

/mask/ .drawer_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background: #000; opacity: 0.5; overflow: hidden; }

/content/ .drawer_box { width: 650rpx; overflow: hidden; position: fixed; top: 50%; left: 0; z-index: 1001; background: #FAFAFA; margin: -150px 50rpx 0 50rpx; border-radius: 3px; }

.drawer_title{ padding:15px; font: 20px "microsoft yahei"; text-align: center; } .drawer_content { height: 210px; overflow-y: scroll; /超出父盒子高度可滚动/ }

.btn_ok{ padding: 10px; font: 20px "microsoft yahei"; text-align: center; border-top: 1px solid #E8E8EA; color: #3CC51F; }

.top{ padding-top:8px; } .bottom { padding-bottom:8px; } .title { height: 30px; line-height: 30px; width: 160rpx; text-align: center; display: inline-block; font: 300 28rpx/30px "microsoft yahei"; }

.input_base { border: 2rpx solid #ccc; padding-left: 10rpx; margin-right: 50rpx; } .input_h30{ height: 30px; line-height: 30px; } .input_h60{ height: 60px; } .input_view{ font: 12px "microsoft yahei"; background: #fff; color:#000; line-height: 30px; }

input { font: 12px "microsoft yahei"; background: #fff; color:#000 ; } radio{ margin-right: 20px; } .grid { display: -webkit-box; display: box; } .col-0 {-webkit-box-flex:0;box-flex:0;} .col-1 {-webkit-box-flex:1;box-flex:1;} .fl { float: left;} .fr { float: right;}

.js的代码如下： Page({ data: { showModalStatus: false }, powerDrawer: function (e) { var currentStatu = e.currentTarget.dataset.statu; this.util(currentStatu) }, util: function(currentStatu){ /* 动画部分 */ // 第1步：创建动画实例 var animation = wx.createAnimation({ duration: 200, //动画时长 timingFunction: "linear", //线* delay: 0 //0则不延迟 })

})

看完之后，小编是迷糊了，毕竟作为一个门外汉着实看不懂，如果你有点基础的话，也可以来学习一下，希望上述的内容可以对你有帮助！那么小程序弹窗功能如何制作的内容就讲完了，谢谢大家来微微风网站学习。