微信小程序 弹窗输入组件的实现解析

微信(小程序)  /  管理员 发布于 3年前   308

写项目的时候发现小程序没有自带的弹窗输入的组件，只能自己写一个。

1.半透明的遮盖层

遮盖层的样式和显隐事件

wxml代码：

 弹窗

wxss代码：

.model{ position: absolute; width: 100%; height: 100%; background: #000; z-index: 999; opacity: 0.5; top: 0; left:0;}

js代码：

 /**  * 页面的初始数据  */ data: {  showModal: false, }, /**  * 控制遮盖层的显示  */ eject:function(){  this.setData({   showModal:true  }) }

2.弹窗窗口实现

弹窗窗口的样式和显隐事件

wxml代码：

   标题      返回          确定 

wxss代码：

.modalDlg{ width: 70%; position: fixed; top:350rpx; left: 0; right: 0; z-index: 9999; margin: 0 auto; background-color: #fff; border-radius: 10rpx; display: flex; flex-direction: column; align-items: center;}.windowRow{ display: flex; flex-direction: row; justify-content: space-between; height: 110rpx; width: 100%;}.back{ text-align: center; color: #f7a6a2; font-size: 30rpx; margin: 30rpx;}.userTitle{ font-size: 30rpx; color: #666; margin: 30rpx;}.wishName{ width: 100%; justify-content: center; flex-direction: row; display: flex; margin-bottom: 30rpx;}.wish_put{ width: 80%; border: 1px solid; border-radius: 10rpx; padding-left: 10rpx;}.wishbnt{ width: 100%; font-size: 30rpx; margin-bottom: 30rpx;}.wishbnt_bt{ width: 50%; background-color: #f7a6a2; color: #fbf1e8; font-size: 30rpx; border: 0;}

js代码：

/**  * 页面的初始数据  */ data: {  showModal: false,  textV:'' }, /**  * 控制显示  */ eject:function(){  this.setData({   showModal:true  }) }, /**  * 点击返回按钮隐藏  */ back:function(){  this.setData({   showModal:false  }) }, /**  * 获取input输入值  */ wish_put:function(e){  this.setData({   textV:e.detail.value  }) }, /**  * 点击确定按钮获取input值并且关闭弹窗  */ ok:function(){  console.log(this.data.textV)  this.setData({   showModal:false  }) }

3.完整代码

最后献上完整代码，有点铝耍刖×肯晗傅

wxml代码：

 弹窗   标题      返回          确定 

wxss代码：

.body{ width: 100%; height: 100%; background-color: #fff; position: fixed; display: flex;}.body button{ height: 100rpx;}.model{ position: absolute; width: 100%; height: 100%; background: #000; z-index: 999; opacity: 0.5; top: 0; left:0;}.modalDlg{ width: 70%; position: fixed; top:350rpx; left: 0; right: 0; z-index: 9999; margin: 0 auto; background-color: #fff; border-radius: 10rpx; display: flex; flex-direction: column; align-items: center;}.windowRow{ display: flex; flex-direction: row; justify-content: space-between; height: 110rpx; width: 100%;}.back{ text-align: center; color: #f7a6a2; font-size: 30rpx; margin: 30rpx;}.userTitle{ font-size: 30rpx; color: #666; margin: 30rpx;}.wishName{ width: 100%; justify-content: center; flex-direction: row; display: flex; margin-bottom: 30rpx;}.wish_put{ width: 80%; border: 1px solid; border-radius: 10rpx; padding-left: 10rpx;}.wishbnt{ width: 100%; font-size: 30rpx; margin-bottom: 30rpx;}.wishbnt_bt{ width: 50%; background-color: #f7a6a2; color: #fbf1e8; font-size: 30rpx; border: 0;}

js代码：

Page({ /**  * 页面的初始数据  */ data: {  showModal: false,  textV:'' }, /**  * 控制显示  */ eject:function(){  this.setData({   showModal:true  }) }, /**  * 点击返回按钮隐藏  */ back:function(){  this.setData({   showModal:false  }) }, /**  * 获取input输入值  */ wish_put:function(e){  this.setData({   textV:e.detail.value  }) }, /**  * 点击确定按钮获取input值并且关闭弹窗  */ ok:function(){  console.log(this.data.textV)  this.setData({   showModal:false  }) }})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• 微信小程序自定义弹窗实现详解(可通用）
• 微信小程序日历弹窗选择器代码实例
• 小程序显示弹窗时禁止下层的内容滚动实现方法
• 支付宝小程序自定义弹窗dialog插件的实现代码
• 微信小程序实现自定义picker选择器弹窗内容
• 微信小程序实现自定义modal弹窗封装的方法
• 微信小程序实战之自定义模态弹窗（8）