您现在的位置是：网站首页> 编程资料编程资料

微信小程序原生自定义弹窗效果_javascript技巧_

2023-05-24 382人已围观

简介微信小程序原生自定义弹窗效果_javascript技巧_

背景

微信小程序原生的在弹出层wx.showModal中可以通过配置项editable配置输入框，但是对于微信的版本有限制，微信版本过低无法显示，所以需要实现弹出层的效果

如下图

代码

index.wxml

                            请输入距离（km）                                取消         确认

index.js

Page({   data: {     inputDisValue:'',     }     })     //实时获取到输入的值   bindKeyInput(e) {     console.log(e.detail.value)     this.setData({       inputDisValue: e.detail.value     })   },   hideCover(){     this.setData({       isShow: false     })   },   showCover(){     this.setData({       isShow:true     })   },

index.wxss

.bg {   position: fixed;   top: 0;   left: 0;   width: 100%;   height: 100%;   background: rgba(0, 0, 0, 0.5);   padding: 0 20rpx; } .btn-group {   position: absolute;   left: 0;   bottom: 0;   width: 100%;   display: flex;   justify-content: space-around;   font-weight: bold;   padding: 20rpx 0; } .weui-input {   background-color: #f1f1f1;   border-radius: 10rpx;   width: 400rpx;   padding: 16rpx 16rpx; } .cover {   width: 100%;   height: 100%;   position: fixed;   top: 0;   left: 0;   display: flex;   justify-content: center;   align-items: center;   z-index: 999; } .cover_child {   width: 550rpx;   height: 300rpx;   background: rgba(255, 255, 255, 1);   border-radius: 20rpx;   display: flex;   flex-direction: column;   align-items: center;   z-index: 5; } .child-title {   white-space: nowrap;   margin-top: 60rpx;   height: 32rpx;   font-size: 34rpx;   font-weight: bold;   color: #333333;   line-height: 36rpx;   margin-bottom: 31rpx; } .cross {   margin-bottom: 110rpx;   bottom: 0rpx;   position: fixed;   width: 60rpx;   height: 60rpx;   z-index: 5; }

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

您可能感兴趣的文章:

上一篇：vue+elementUi实现点击地图自动填充经纬度以及地点_vue.js_

下一篇：vue3 keepalive源码解析解决线上问题_vue.js_

您现在的位置是：网站首页> 编程资料编程资料

微信小程序原生自定义弹窗效果_javascript技巧_

背景

代码

相关内容

点击排行

本栏推荐

猜你喜欢