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

最新推荐文章于 2025-03-11 11:06:15 发布

fat_fat

最新推荐文章于 2025-03-11 11:06:15 发布

阅读量3.2k

点赞数 1

分类专栏：小程序文章标签：小程序

www.ailaiyun.com

本文链接：https://blog.youkuaiyun.com/fat_fat/article/details/109194917

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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&#