微信小程序弹窗输入组件的实现解析

更新时间：2020-09-07 17:18:01 作者：startmvc

写项目的时候发现小程序没有自带的弹窗输入的组件，只能自己写一个。1.半透明的遮盖层

写项目的时候发现小程序没有自带的弹窗输入的组件，只能自己写一个。

1.半透明的遮盖层

遮盖层的样式和显隐事件

wxml代码：


<view class="body">
 <button bindtap='eject'>弹窗</button>
</view>
<view class="model" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'></view>

wxss代码：


.model{
 position: absolute;
 width: 100%;
 height: 100%;
 background: #000;
 z-index: 999;
 opacity: 0.5;
 top: 0;
 left:0;
}

js代码：


 /**
 * 页面的初始数据
 */
 data: {
 showModal: false,
 },
 /**
 * 控制遮盖层的显示
 */
 eject:function(){
 this.setData({
 showModal:true
 })
 }

2.弹窗窗口实现

弹窗窗口的样式和显隐事件

wxml代码：


<view class="modalDlg" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'>
 <view class='windowRow'>
 <text class='userTitle'>标题
 </text>
 <view class='back' bindtap='back'>
 返回
 </view>
 </view>
 <view class='wishName'>
 <input bindinput='wish_put' placeholder='请输入内容' class='wish_put'></input>
 </view>
 <view class='wishbnt'>
 <button class='wishbnt_bt' bindtap='ok'>确定</button>
 </view>
</view>

wxss代码：


.modalDlg{
 width: 70%;
 position: fixed;
 top:350rpx;
 left: 0;
 right: 0;
 z-index: 9999;
 margin: 0 auto;
 background-color: #fff;
 border-radius: 10rpx;
 display: flex;
 flex-direction: column;
 align-items: center;
}
.windowRow{
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 height: 110rpx;
 width: 100%;
}
.back{
 text-align: center;
 color: #f7a6a2;
 font-size: 30rpx;
 margin: 30rpx;
}
.userTitle{
 font-size: 30rpx;
 color: #666;
 margin: 30rpx;
}
.wishName{
 width: 100%;
 justify-content: center;
 flex-direction: row;
 display: flex;
 margin-bottom: 30rpx;
}
.wish_put{
 width: 80%;
 border: 1px solid;
 border-radius: 10rpx;
 padding-left: 10rpx;
}
.wishbnt{
 width: 100%;
 font-size: 30rpx;
 margin-bottom: 30rpx;
}
.wishbnt_bt{
 width: 50%;
 background-color: #f7a6a2;
 color: #fbf1e8;
 font-size: 30rpx;
 border: 0;
}

js代码：


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

3.完整代码

最后献上完整代码，有点啰嗦了，想尽量详细点

wxml代码：


<view class="body">
 <button bindtap='eject'>弹窗</button>
</view>
<view class="model" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'></view>
<view class="modalDlg" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'>
 <view class='windowRow'>
 <text class='userTitle'>标题
 </text>
 <view class='back' bindtap='back'>
 返回
 </view>
 </view>
 <view class='wishName'>
 <input bindinput='wish_put' placeholder='请输入内容' class='wish_put'></input>
 </view>
 <view class='wishbnt'>
 <button class='wishbnt_bt' bindtap='ok'>确定</button>
 </view>
</view>

wxss代码：


.body{
 width: 100%;
 height: 100%;
 background-color: #fff;
 position: fixed;
 display: flex;
}
.body button{
 height: 100rpx;
}
.model{
 position: absolute;
 width: 100%;
 height: 100%;
 background: #000;
 z-index: 999;
 opacity: 0.5;
 top: 0;
 left:0;
}
.modalDlg{
 width: 70%;
 position: fixed;
 top:350rpx;
 left: 0;
 right: 0;
 z-index: 9999;
 margin: 0 auto;
 background-color: #fff;
 border-radius: 10rpx;
 display: flex;
 flex-direction: column;
 align-items: center;
}
.windowRow{
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 height: 110rpx;
 width: 100%;
}
.back{
 text-align: center;
 color: #f7a6a2;
 font-size: 30rpx;
 margin: 30rpx;
}
.userTitle{
 font-size: 30rpx;
 color: #666;
 margin: 30rpx;
}
.wishName{
 width: 100%;
 justify-content: center;
 flex-direction: row;
 display: flex;
 margin-bottom: 30rpx;
}
.wish_put{
 width: 80%;
 border: 1px solid;
 border-radius: 10rpx;
 padding-left: 10rpx;
}
.wishbnt{
 width: 100%;
 font-size: 30rpx;
 margin-bottom: 30rpx;
}
.wishbnt_bt{
 width: 50%;
 background-color: #f7a6a2;
 color: #fbf1e8;
 font-size: 30rpx;
 border: 0;
}

js代码：


Page({
 /**
 * 页面的初始数据
 */
 data: {
 showModal: false,
 textV:''
 },
 /**
 * 控制显示
 */
 eject:function(){
 this.setData({
 showModal:true
 })
 },
 /**
 * 点击返回按钮隐藏
 */
 back:function(){
 this.setData({
 showModal:false
 })
 },
 /**
 * 获取input输入值
 */
 wish_put:function(e){
 this.setData({
 textV:e.detail.value
 })
 },
 /**
 * 点击确定按钮获取input值并且关闭弹窗
 */
 ok:function(){
 console.log(this.data.textV)
 this.setData({
 showModal:false
 })
 }
})

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