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


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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
ExtJS 下拉多选框lovcombo
May 19 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
实例讲解JQuery中this和$(this)区别
Dec 08 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
Vue.js添加组件操作示例
Jun 13 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
js实现蒙版效果
Jan 11 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 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
汉字转化为拼音(php版)
2006/10/09 PHP
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
浅析js中取绝对值的2种方法
2013/07/09 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
python实现多线程网页下载器
2018/04/15 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
python中的句柄操作的方法示例
2019/06/20 Python
python二维键值数组生成转json的例子
2019/12/06 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
Python网页解析器使用实例详解
2020/05/30 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
英国名牌男装店:Standout
2021/02/17 全球购物
文员的职业生涯规划发展方向
2014/02/08 职场文书
医院义诊活动总结
2014/07/04 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
学习nginx基础知识
2021/09/04 Servers
mysql事务隔离级别详情
2021/10/24 MySQL