使用小程序创建弹窗输入组件（小程序实现点击按钮弹窗）。

在创建项目的时候，我发现小程序没有自己的弹窗输入组件，只好自己创建一个。

1.半透明覆盖层

覆盖层样式和隐藏事件的WXML代码：

弹出窗口

wxss 代码：

.model{ 位置：宽度：100%；背景：#000；z- 透明度：0.5； ;}

js代码:

/** * 初始页面数据 */ data: { showModal: false, }, /** * 控制叠加层显示 */ject: function () { this.setData({ showModal:true }) }2. 弹窗窗口实现

弹窗样式及显示/隐藏事件WXML代码：

Title Return 确定

wxss代码：

.modalDlg{宽度： 70%；位置：顶部：350rpx；: 0; z-索引: 9999; 背景-颜色: #fff; 显示: flex- 方向: k3] 对齐项目：居中；}.windowRow{ 显示：Flex；flex- 方向：行 - 对齐内容：- 之间的空格； 高度: 110rpx; 宽度: 100%;}.back{ 文本-对齐: 颜色: #f7a6a2; 字体-尺寸: 30rpx; }.userTitle{ 字体-尺寸: 30rpx ;颜色：#666；边距：30rpx；}.wishName{ 宽度：100%；对齐内容：中心；flex-方向：行；显示：flex；边距：30rpx；} .wish_put{宽度：80%；边框：1像素实线； 边框-半径：10rpx；填充-左：10rpx；}.wishbnt{宽度：100%；字体-大小：30rpx；边距-底部：30rpx；}.wishbnt_bt{宽度：50%；背景 - 颜色：#f7a6a2；#fbf1e8; 字体-大小: 30rpx; border: 0;}

js代码:

/** * 初始页面数据 */ data: { showModal: false, textV:'' }, / * * * 控制显示 */ject: function(){ this.setData({ showModal:true }) }, /** * 点击后退按钮隐藏 */ back:function( ){ this.setData({ showModal: false } ) }, /** * 获取输入值 */ Wish_put:function(e){ this.setData({ textV:e.detail.value }) }, / ** * 点击确定按钮获取输入值并关闭弹出窗口 * / ok:function(){ console.log(this.data.textV) this.setData({ showModal:false }) }3 . 完整代码

最后，这是完整的代码。 有点多余了。 我想尽可能详细地解释 wxml 代码。

弹出窗口 标题 返回 ; 确定

wxss代码：

.body{ 宽度：100%; 背景[ k3; ]颜色：#fff;显示：flex;}.body按钮{高度：100rpx;}.模型{位置：绝对；高度：100%；索引：999；顶部：0；}.modalDlg{ 宽度：70%；顶部：350rpx；右侧：0； ：0自动；背景-颜色：#fff；边框-半径：10rpx；显示：flex；flex-方向：中心；}.windowRow{显示：flex； - 方向：行； - 对齐内容： - 之间放置空格。 高度：110rpx；宽度：100%；}.back{ 文本-对齐：中心；字体-尺寸：30rpx；30rpx;}.userTitle{ 字体-大小：30rpx; 边距：30rpx;}.wishName{ 宽度：100%； flex; margin-bottom: 30rpx;}.wish_put{宽度: 80% 边框: 1 像素实线; 边框-半径：10rpx；内边距-左：10rpx；}.wishbnt{宽度：100%；字体-大小：30rpx；边距-底部：30rpx；}.wishbnt_bt{宽度：50%；背景-颜色：#f7a6a2;颜色：#fbf1e8;字体-大小：30rpx; }

js代码：

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

推荐教程：《微信小程序》

PHP 快速学习视频免费教程（从入门到精通）

学习 PHP PHP 如何入门? 我应该去哪里学习PHP？ 不用担心。 这里有简单的 PHP 学习教程（从初学者到专家）。 您可以保存并下载您想学习的朋友。

下载

这几篇文章你可能也喜欢：

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：使用小程序创建弹窗输入组件（小程序实现点击按钮弹窗）。 https://zhujicankao.com/123669.html