微信小程序弹出可输入数据窗口

最新推荐文章于 2026-03-12 10:18:58 发布

原创最新推荐文章于 2026-03-12 10:18:58 发布 · 3.3k 阅读

15 ·

本内容遵循CC 4.0 BY-SA版权协议

www.ailaiyun.com

标签

#小程序

小程序专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了如何在微信小程序中创建一个弹出窗口，该窗口允许用户输入数据。通过结合wxml、wxss和js文件的使用，详细阐述了实现这个交互功能的步骤和代码实现。

wxml文件：

<!--弹窗模块-->
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
<view class="modal-dialog" wx:if="{{showModal}}">
    <view class="modal-title">修改姓名</view>
    <view class="modal-content">
      <view class="modal-input">
        <input placeholder-class="input-holder" type="text" maxlength="10" bindinput="inputChangename" class="input" value="{{stuName}}"></input>
      </view>
    </view>
    <view class="modal-footer">
      <view class="btn-cancel" bindtap="onCancelname" data-status="cancel">取消</view>
      <view class="btn-confirm" bindtap="onConfirmname" data-status="confirm">确定</view>
    </view>
  </view>
<!--视图层-->
 <view class='edit_name'>
  <view class='stu_name'>姓名</view>
  <text class='list' selectable='true'>{{stuName}}</text>
  <view class='edit' bindtap='nameup'>更新</view>
 </view>

wxss文件：

/* 弹窗 */
.show-btn {
  margin-top: 100rpx;
  color: #22cc22;
}
.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
  z-index: 9000;
  color: #fff;
}
.modal-dialog {
  width: 540rpx;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 9999;
  background: #fff;
  margin: -180rpx 105rpx;
  border-radius: 36rpx;
}
.modal-title {
  padding-top: 50rpx;
  font-size: 36rpx;
  color: #030303;
  text-align: center;
}
.modal-content {
  padding: 50rpx 32rpx;
}
.modal-input {
  display: flex;
  background: #fff;
  border-bottom: 2rpx solid #ddd;
  border-radius: 4rpx;
  font-size: 28rpx;
}
.input {
  width: 100%;
  height: 82rpx;
  font-size: 28rpx;
  line-height: 28rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  color: #333;
}
input-holder {
  color: #666;
  font-size: 28rpx;
}
.modal-footer {
  display: flex;
  flex-direction: row;
  height: 86rpx;
  border-top: 1px solid #dedede;
  font-size: 34rpx;
  line-height: 86rpx;
}
.btn-cancel {
  width: 50%;
  color: #666;
  text-align: center;
  border-right: 1px solid #dedede;
}
.btn-confirm {
  width: 50%;
  color: #ec5300;
  text-align: center;
}

js文件：

  //显示模块对话框
  nameup: function() {
    this.setData({
      showModal: true
    })
  },
  //隐藏模块对话框
  hideModal: function() {
   this.setData({
      showModal: false
    });
  },
  // 对话框取消按钮点击事件
  onCancelname: function() {
    this.hideModal();
  },
   // 输入框内容改变事件
  inputChangename: function(e) {
    this.setData({
      stuName: e.detail.value
    })
  },
  //  对话框确认按钮点击事件
  onConfirmname: function() {
    var that = this;
    wx.request({
      url: 'https://www.111111.com/111.php',
      method: "post",
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      data: {
        type: "updata",   //在服务器端已这个参数判断调动哪个函数或者IF语句
        stuname: that.data.stuName,
      },
      success(res) {
        console.log(res.data)
        if (res.data == '成功') {
          wx.showToast({
            title: '修改成功',
            icon: 'success'
          })
          that.hideModal();
        } else if (res.data == '') {
          wx.showToast({
            title: '服务器连接失败',
            icon: 'none'
          })
        }
      },
    })
  },

原文地址：https://www.ailaiyun.com/%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f-%e5%bc%b9%e5%87%ba%e5%8f%af%e8%be%93%e5%85%a5%e6%95%b0%e6%8d%ae%e7%aa%97%e5%8f%a3.html