微信小程序原生自定义弹窗

背景

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

代码

index.wxml

<!-- 遮罩层 --><view wx:if="{{isShow}}" class='cover'><!-- 可在此按需求自定义遮罩 --><view style="position: relative;"><view class='cover_child'><text class="child-title">请输入距离（km）</text><input class="weui-input" type="number" bindinput="bindKeyInput" placeholder="请输入1-80之间的整数" /></view><view class='btn-group'><view catchtap="hideCover">取消</view><view style="color: #5A6B8F;">确认</view></view></view></view>

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;
}

微信小程序原生自定义弹窗相关推荐

【微信小程序】自定义弹窗蒙版输入框效果图完整代码
[微信小程序]自定义弹窗文本输入框效果图&完整代码效果图在输入框中进行内容的输入点击确认后在姓名一栏进行更新修改点击返回后姓名一栏不做任何修改在这个的基础上你可以自定义任何弹窗 wx ...
微信小程序之自定义模态弹窗（带动画）实例
代码地址如下: http://www.demodashi.com/demo/13991.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内使用scroll-view实现滚动内容（包括图片）
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内可以滚动内容(包括图片) 效果图这里的遮罩层内容由两张图片构成底图+内部内容实现代码 wxml 使用云开发的存储,自己开发的时候换掉src即可 ...
【微信小程序-原生开发】实用教程05-首页（含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片）
开始前,请先完成启动/欢迎/首屏广告页的开发,详见 [微信小程序-原生开发]实用教程04-启动/欢迎/首屏广告页(含倒计时.添加文字.rpx.定义变量和函数.读取变量.修改变量.wx.reLaunch ...
微信小程序原生开发记录
遇到类似 ref 交互的情况所需写法 // wxml<wux-calendar id="wux-calendar" /> // js Page({data: {}, ...
微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
微信小程序原生上传图片封装
资源参考组件免费下载地址概述微信小程序原生上传图片功能封装,具体使用根据个人情况而定. 组件自定义属性与方法描述 isShow:布尔值,默认为true true:不显示上传图标 false:显示 ...
【微信小程序-原生开发】实用教程20 - 生成海报（实战范例为生成活动海报，内含生成指定页面的小程序二维码，保存图片到手机，canvas 系列教程）
可在系列教程的基础上继续开发,也可以单独使用 [微信小程序-原生开发]系列教程效果预览代码实现点击触发生成海报在活动详情页,指定点击某图标/按钮,触发跳转到生成海报的页面 pages\comp ...
微信小程序wepy自定义card控件封装
微信小程序wepy自定义card控件在利用wepy开发小程序的过程中,需要使用自定义控件来实现,但是很多时候,若直接在page页面中写对应的控件,下次在另一个页面中,想使用同样的控件又需要重新绑定数 ...
【微信小程序-原生开发】实用教程08 - 开通微信云开发，操作云数据库新增数据（含修改数据权限），初始化云服务（含获取微信云环境 id），获取云数据，滚动公告栏
开始前,请先完成圆梦宝典中宫格导航的开发,详见 [微信小程序-原生开发]实用教程 07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字) https://blog.csdn.net ...

微信小程序原生自定义弹窗

背景

代码

微信小程序原生自定义弹窗相关推荐

最新文章

热门文章