主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
在创建项目的时候,我发现小程序没有自己的弹窗输入组件,只好自己创建一个。
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 学习教程(从初学者到专家)。 您可以保存并下载您想学习的朋友。
下载
这几篇文章你可能也喜欢:
- 如果我的小程序的 new Date() 方法失败,我该怎么办?
- 小程序页面之间如何传递数据(小程序方法之间传递参数)
- 解决小程序画布隐藏问题(小程序绘图)
- 解决小程序中代码同步执行问题(同步小程序与异步小程序的区别)
- 小程序和常规网页开发有什么区别(小程序和网页的区别)
本文由主机参考刊发,转载请注明:使用小程序创建弹窗输入组件(小程序实现点击按钮弹窗)。 https://zhujicankao.com/123669.html
评论前必须登录!
注册