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

 更新时间:2019年08月12日 11:47:46   转载 作者:kevie  
这篇文章主要介绍了微信小程序 弹窗输入组件的实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

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

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

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

相关文章

  • 原生js实现轮播图特效

    原生js实现轮播图特效

    这篇文章主要为大家详细介绍了原生js实现轮播图特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • 浅谈微信页面入口文件被缓存解决方案

    浅谈微信页面入口文件被缓存解决方案

    缓存对于前端页面来说,是加速页面加载的利器之一,但也同时带来了很多问题,这篇文章主要介绍了浅谈微信页面入口文件被缓存解决方案,感兴趣的小伙伴们可以参考一下
    2018-09-09
  • js中eval详解

    js中eval详解

    先来说eval的用法,内容比较简单,熟悉的可以跳过
    2012-03-03
  • 详解JavaScript逻辑Not运算符

    详解JavaScript逻辑Not运算符

    这篇文章主要介绍了JavaScript逻辑Not运算符,逻辑NOT运算符与C和Java中的逻辑 NOT 运算符相同,都由感叹号(!)表示,想要深入了解逻辑Not运算符的朋友可以参考一下
    2015-12-12
  • JS图片压缩(pc端和移动端都适用)

    JS图片压缩(pc端和移动端都适用)

    本文主要分享了JS图片压缩的方法。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • react-router4按需加载(踩坑填坑)

    react-router4按需加载(踩坑填坑)

    这篇文章主要介绍了react-router4按需加载(踩坑填坑),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • js时间戳格式化成日期格式的多种方法介绍

    js时间戳格式化成日期格式的多种方法介绍

    本篇文章主要介绍了js时间戳格式化成日期格式的多种方法介绍的资料,这里整理了详细的代码,有需要的小伙伴可以参考下。
    2017-02-02
  • JS中的作用域链

    JS中的作用域链

    本文主要介绍了JS中的作用域链的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • 神级程序员JavaScript300行代码搞定汉字转拼音

    神级程序员JavaScript300行代码搞定汉字转拼音

    这篇文章主要介绍了神级程序员JavaScript300行代码搞定汉字转拼音,需要的朋友可以参考下
    2017-05-05
  • js验证框架之RealyEasy验证详解

    js验证框架之RealyEasy验证详解

    这篇文章主要为大家详细介绍了js验证框架之RealyEasy验证,记录了RealyEasy验证的使用步骤,感兴趣的小伙伴们可以参考一下
    2016-06-06

最新评论