微信小程序原生自定义弹窗效果
更新时间:2022年07月06日 09:45:03 作者:cwj thin
这篇文章主要为大家详细介绍了微信小程序原生自定义弹窗效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
背景
微信小程序原生的在弹出层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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Web Woker与主线程通信场景下对postMessage的简洁封装详解
这篇文章主要为大家介绍了Web Woker与主线程通信场景下对postMessage的简洁封装示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09JS为什么说async/await是generator的语法糖详解
这篇文章主要给大家介绍了关于JS为什么说async/await是generator的语法糖的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧2019-07-07layUI使用layer.open,在content打开数据表格,获取值并返回的方法
今天小编就为大家分享一篇layUI使用layer.open,在content打开数据表格,获取值并返回的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09移动端触屏幻灯片图片切换插件idangerous swiper.js
这篇文章主要为大家详细介绍了移动端触屏幻灯片图片切换插件idangerous swiper.js的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-04-04
最新评论