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


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 相关文章推荐
JavaScript去除空格的几种方法
Oct 03 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
vue 项目build错误异常的解决方法
Apr 22 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 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
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
openPNE常用方法分享
2011/11/29 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
python实现堆栈与队列的方法
2015/01/15 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
Python应用库大全总结
2018/05/30 Python
python实现烟花小程序
2019/01/30 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
庆祝国庆节演讲稿2014
2014/09/19 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
齐云山导游词
2015/02/06 职场文书
环卫工作个人总结
2015/03/04 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书