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


Posted in Javascript onAugust 12, 2019

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

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.完整代码

最后献上完整代码,有点??铝耍?刖×肯晗傅?br />

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

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

Javascript 相关文章推荐
慎用 somefunction.prototype 分析
Jun 02 Javascript
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
javascript实现的多个层切换效果通用函数实例
Jul 06 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
javascript实现QQ空间相册展示源码
Dec 12 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
javascript实现固定侧边栏
Feb 09 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 #Javascript
ElementUI radio组件选中小改造
Aug 12 #Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 #Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 #Javascript
react实现antd线上主题动态切换功能
Aug 12 #Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 #Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 #Javascript
You might like
第1次亲密接触PHP5(1)
2006/10/09 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
提高php编程效率技巧
2015/08/13 PHP
PHP反射学习入门示例
2019/06/14 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
Python正则表达式使用经典实例
2016/06/21 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
使用Python来开发微信功能
2018/06/13 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
最新教师自我评价分享
2013/11/12 职场文书
优秀研究生自我鉴定
2013/12/04 职场文书
参观监狱心得体会
2014/01/02 职场文书
5.1手机促销活动
2014/01/17 职场文书
委托书样本
2014/04/02 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
一份文言文检讨书
2014/09/13 职场文书