小程序弹出模态框(可输入文字)


前言

其实小程序实现模态框实现其实比较繁琐也不太方便,以下给大家分享一个自己做过一些小案例


一、如何使用?

基于小程序自带的一些组件
下面是我调试之后的样式和代码希望对你有所帮助

二、wxml

1.wxml

代码如下:

   <button class="show-btn" bindtap="showDialogBtn">今日体重</button>

          <!--弹窗-->

          <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>

          <view class="modal-dialog" wx:if="{{showModal}}">

            <view class="modal-content">
              <view class="modal-input">
                <form  catchsubmit="formSubmit" catchreset="formReset">
                  <input focus="auto" placeholder-class="input-holder" type="number" name="tizhong" maxlength="10" bindinput="inputChange"
                    class="input"fou placeholder="请输入体重"></input>
                    <button class="btn-confirm" bindtap="onConfirm" data-status="confirm" formType="submit" size="mini">确定</button>
                </form>
              </view>
            </view>
          </view>
        </view>

2.js

代码如下:

formSubmit(e) {
    console.log('form发生了submit事件,携带数据为:', e.detail.value)
  },

2.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;

}
<think>好的,用户问的是微信小程序弹出提示框,我需要详细介绍一下。首先,我应该从wx.showToast开始,这是最常用的提示框,用于轻量级的提示,比如操作成功或失败。需要说明它的基本用法,比如图标类型、标题、持续时间,还有代码示例。 然后,可能用户需要更复杂的交互,比如确认对话框,这时候应该介绍wx.showModal,它可以有确认和取消按钮,并且可以处理用户的点击事件。要举一个例子,比如删除确认的场景,并给出示例代码。 接下来,如果用户需要自定义更多的内容,比如输入框,那么wx.showActionSheet就派上用场了。这里需要说明它如何显示操作菜单,以及每个选项的回调处理。 还要提到这些API的注意事项,比如showToast的持续时间限制,同时只能显示一个提示框,避免重复调用。另外,不同小程序平台的兼容性可能有些差异,这点也需要提醒开发者。 最后,总结一下不同场景下该使用哪种提示框,帮助用户根据需求选择合适的方法。确保回答结构清晰,步骤明确,代码正确,并且用中文口语化表达,避免使用Markdown格式,让用户容易理解。</think>微信小程序中的弹出提示框主要有以下几种实现方式,开发者可根据不同场景选择合适的方法: 1. wx.showToast(轻提示) - 适用场景:短暂提示操作结果(如"提交成功") - 特点: ✔️ 自动消失(默认1.5秒) ✔️ 支持图标(success/loading/none) ✔️ 最大显示7个汉字 示例代码: ```javascript wx.showToast({ title: '提交成功', icon: 'success', duration: 2000 }) ``` 2. wx.showModal(模态对话框) - 适用场景:需要用户确认的操作(如删除确认) - 特点: ✔️ 带确认/取消按钮 ✔️ 支持异步回调 ✔️ 可设置标题和内容 示例代码: ```javascript wx.showModal({ title: '提示', content: '确定要删除吗?', success(res) { if (res.confirm) { console.log('用户点击确定') } else if (res.cancel) { console.log('用户点击取消') } } }) ``` 3. wx.showActionSheet(操作菜单) - 适用场景:提供多个操作选项 - 特点: ✔️ 从底部弹出菜单 ✔️ 支持自定义按钮列表 ✔️ 返回选中项的索引 示例代码: ```javascript wx.showActionSheet({ itemList: ['拍照', '从相册选择'], success(res) { console.log('选中索引:' + res.tapIndex) }, fail(res) { console.log(res.errMsg) } }) ``` 使用注意事项: 1. 提示框不可叠加显示,新提示会关闭旧提示 2. showToast的duration范围1500-10000毫秒 3. 安卓/iOS的样式表现可能有细微差异 4. 复杂场景建议配合组件的show/hide属性自定义弹窗 开发建议: - 重要操作使用showModal确保用户明确确认 - 加载状态推荐使用loading图标 - 网络请求失败时可配合使用wx.showToast提示错误信息 - 需要输入内容时建议使用自定义模态弹窗 这些API都支持Promise风格调用(基础库2.10.2+),可根据项目需要选择不同的使用方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值