支付宝小程序弹出密码输入框(使用支付宝官方组件)

最新推荐文章于 2023-09-13 09:35:11 发布

UUID_IU

最新推荐文章于 2023-09-13 09:35:11 发布

阅读量1.6k

点赞数 1

文章标签：小程序 javascript css html

本文链接：https://blog.csdn.net/qq_40603040/article/details/106663658

版权

本文介绍了在支付宝小程序中如何结合Modal对话框和form、input组件创建密码输入弹框。详细讲述了通过axml、acss和js文件的代码实现过程，包括用户点击按钮弹出密码输入框、获取密码值、关闭弹框的事件处理以及调用my.request发送请求到后端的逻辑。

摘要由CSDN通过智能技术生成

问题概述

在做支付宝小程序时，需求是要弹出密码输入框，然而找遍支付宝官方文档只有可以弹出输入框的my.prompt(需要了解此方法的小伙伴通过https://opendocs.alipay.com/mini/api/vqpy01)，但没有弹出可以输入密码框的，于是我联合了官方文档的Modal 对话框和form、input组件解决了此问题。

代码片段

.axml

根据官方文档中modal对话框的相关参数和方法，联合form和input组件构建弹框中的密码输入框布局样式。

<button type="primary" onTap="clickMe">点我</button>
<modal show="{
   {modalOpened22}}" onModalClick="onModalClick22" onModalClose="onModalClose22" topImageSize="sm">
  <view slot="header">密码</view>
  <form onSubmit="onButtomSubmit">
    <view class="page-section">
      <view class="form-row">
        <view class="row-extra1">
          <input class="input" password type="text" name="ICPmm" value="{
   {ICPmmVal}}" onInput="bindKeyInput1" placeholder="请输入密码" placeholder-class