经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序 弹窗输入组件的实现解析
来源：jb51　　时间：2019/8/13 8:53:09　　对本文有异议

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

1.半透明的遮盖层

遮盖层的样式和显隐事件

wxml代码：

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

wxss代码：

  1. .model{
  2.  position: absolute;
  3.  width: 100%;
  4.  height: 100%;
  5.  background: #000;
  6.  z-index: 999;
  7.  opacity: 0.5;
  8.  top: 0;
  9.  left:0;
  10. }

js代码：

  1.  /**
  2.   * 页面的初始数据
  3.   */
  4.  data: {
  5.   showModal: false,
  6.  },
  7.  /**
  8.   * 控制遮盖层的显示
  9.   */
  10.  eject:function(){
  11.   this.setData({
  12.    showModal:true
  13.   })
  14.  }

2.弹窗窗口实现

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

wxml代码：

  1. <view class="modalDlg" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'>
  2.  <view class='windowRow'>
  3.   <text class='userTitle'>标题
  4.  </text>
  5.   <view class='back' bindtap='back'>
  6.    返回
  7.   </view>
  8.  </view>
  9.  <view class='wishName'>
  10.   <input bindinput='wish_put' placeholder='请输入内容' class='wish_put'></input>
  11.  </view>
  12.  <view class='wishbnt'>
  13.   <button class='wishbnt_bt' bindtap='ok'>确定</button>
  14.  </view>
  15. </view>

wxss代码：

  1. .modalDlg{
  2.  width: 70%;
  3.  position: fixed;
  4.  top:350rpx;
  5.  left: 0;
  6.  right: 0;
  7.  z-index: 9999;
  8.  margin: 0 auto;
  9.  background-color: #fff;
  10.  border-radius: 10rpx;
  11.  display: flex;
  12.  flex-direction: column;
  13.  align-items: center;
  14. }
  15. .windowRow{
  16.  display: flex;
  17.  flex-direction: row;
  18.  justify-content: space-between;
  19.  height: 110rpx;
  20.  width: 100%;
  21. }
  22. .back{
  23.  text-align: center;
  24.  color: #f7a6a2;
  25.  font-size: 30rpx;
  26.  margin: 30rpx;
  27. }
  28. .userTitle{
  29.  font-size: 30rpx;
  30.  color: #666;
  31.  margin: 30rpx;
  32. }
  33. .wishName{
  34.  width: 100%;
  35.  justify-content: center;
  36.  flex-direction: row;
  37.  display: flex;
  38.  margin-bottom: 30rpx;
  39. }
  40. .wish_put{
  41.  width: 80%;
  42.  border: 1px solid;
  43.  border-radius: 10rpx;
  44.  padding-left: 10rpx;
  45. }
  46. .wishbnt{
  47.  width: 100%;
  48.  font-size: 30rpx;
  49.  margin-bottom: 30rpx;
  50. }
  51. .wishbnt_bt{
  52.  width: 50%;
  53.  background-color: #f7a6a2;
  54.  color: #fbf1e8;
  55.  font-size: 30rpx;
  56.  border: 0;
  57. }

js代码：

  1. /**
  2.   * 页面的初始数据
  3.   */
  4.  data: {
  5.   showModal: false,
  6.   textV:''
  7.  },
  8.  /**
  9.   * 控制显示
  10.   */
  11.  eject:function(){
  12.   this.setData({
  13.    showModal:true
  14.   })
  15.  },
  16.  /**
  17.   * 点击返回按钮隐藏
  18.   */
  19.  back:function(){
  20.   this.setData({
  21.    showModal:false
  22.   })
  23.  },
  24.  /**
  25.   * 获取input输入值
  26.   */
  27.  wish_put:function(e){
  28.   this.setData({
  29.    textV:e.detail.value
  30.   })
  31.  },
  32.  /**
  33.   * 点击确定按钮获取input值并且关闭弹窗
  34.   */
  35.  ok:function(){
  36.   console.log(this.data.textV)
  37.   this.setData({
  38.    showModal:false
  39.   })
  40.  }

3.完整代码

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

wxml代码：

  1. <view class="body">
  2.  <button bindtap='eject'>弹窗</button>
  3. </view>
  4. <view class="model" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'></view>
  5. <view class="modalDlg" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'>
  6.  <view class='windowRow'>
  7.   <text class='userTitle'>标题
  8.  </text>
  9.   <view class='back' bindtap='back'>
  10.    返回
  11.   </view>
  12.  </view>
  13.  <view class='wishName'>
  14.   <input bindinput='wish_put' placeholder='请输入内容' class='wish_put'></input>
  15.  </view>
  16.  <view class='wishbnt'>
  17.   <button class='wishbnt_bt' bindtap='ok'>确定</button>
  18.  </view>
  19. </view>

wxss代码：

  1. .body{
  2.  width: 100%;
  3.  height: 100%;
  4.  background-color: #fff;
  5.  position: fixed;
  6.  display: flex;
  7. }
  8. .body button{
  9.  height: 100rpx;
  10. }
  11. .model{
  12.  position: absolute;
  13.  width: 100%;
  14.  height: 100%;
  15.  background: #000;
  16.  z-index: 999;
  17.  opacity: 0.5;
  18.  top: 0;
  19.  left:0;
  20. }
  21. .modalDlg{
  22.  width: 70%;
  23.  position: fixed;
  24.  top:350rpx;
  25.  left: 0;
  26.  right: 0;
  27.  z-index: 9999;
  28.  margin: 0 auto;
  29.  background-color: #fff;
  30.  border-radius: 10rpx;
  31.  display: flex;
  32.  flex-direction: column;
  33.  align-items: center;
  34. }
  35. .windowRow{
  36.  display: flex;
  37.  flex-direction: row;
  38.  justify-content: space-between;
  39.  height: 110rpx;
  40.  width: 100%;
  41. }
  42. .back{
  43.  text-align: center;
  44.  color: #f7a6a2;
  45.  font-size: 30rpx;
  46.  margin: 30rpx;
  47. }
  48. .userTitle{
  49.  font-size: 30rpx;
  50.  color: #666;
  51.  margin: 30rpx;
  52. }
  53. .wishName{
  54.  width: 100%;
  55.  justify-content: center;
  56.  flex-direction: row;
  57.  display: flex;
  58.  margin-bottom: 30rpx;
  59. }
  60. .wish_put{
  61.  width: 80%;
  62.  border: 1px solid;
  63.  border-radius: 10rpx;
  64.  padding-left: 10rpx;
  65. }
  66. .wishbnt{
  67.  width: 100%;
  68.  font-size: 30rpx;
  69.  margin-bottom: 30rpx;
  70. }
  71. .wishbnt_bt{
  72.  width: 50%;
  73.  background-color: #f7a6a2;
  74.  color: #fbf1e8;
  75.  font-size: 30rpx;
  76.  border: 0;
  77. }

js代码：

  1. Page({
  2.  /**
  3.   * 页面的初始数据
  4.   */
  5.  data: {
  6.   showModal: false,
  7.   textV:''
  8.  },
  9.  /**
  10.   * 控制显示
  11.   */
  12.  eject:function(){
  13.   this.setData({
  14.    showModal:true
  15.   })
  16.  },
  17.  /**
  18.   * 点击返回按钮隐藏
  19.   */
  20.  back:function(){
  21.   this.setData({
  22.    showModal:false
  23.   })
  24.  },
  25.  /**
  26.   * 获取input输入值
  27.   */
  28.  wish_put:function(e){
  29.   this.setData({
  30.    textV:e.detail.value
  31.   })
  32.  },
  33.  /**
  34.   * 点击确定按钮获取input值并且关闭弹窗
  35.   */
  36.  ok:function(){
  37.   console.log(this.data.textV)
  38.   this.setData({
  39.    showModal:false
  40.   })
  41.  }
  42. })

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

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

微信小程序热门文章

  • 如何在微信小程序中实现音视频通话
  • 微信小程序调用摄像头实现拍照功能
  • 微信小程序隐私保护协议修改方法 uniapp
  • 微信小程序实现简单的购物车功能
  • 微信小程序访问mysql数据库流程详解
  • 微信小程序实现计算器案例
  • 微信小程序时间轴实现方法示例
  • 微信小程序使用uni-app开发小程序及部分功能实现详解
  • 微信小程序实现聊天室功能
  • 微信小程序底部tabBar遮挡内容的简单处理方法

    • 微信小程序推荐文章

  • 微信小程序车牌键盘输入组件（支持单个删除更改，支持赋值，支持新能源）
  • 小程序优化：第三方SDK过大解决方案
  • .NET生成微信小程序推广二维码
  • 微信小程序动态生成表单来啦！你再也不需要手写表单了！
  • web应用及微信小程序版本更新检测方案实践
  • 微信小程序隐私保护协议修改方法 uniapp
  • 如何在微信小程序中实现音视频通话
  • 微信小程序抢红包高并发设计
  • uni-app + .NET 7实现微信小程序订阅消息推送
  • 微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号