微信小程序——提示弹窗wx.showModal

最新推荐文章于 2025-07-26 15:18:16 发布

时代新人

最新推荐文章于 2025-07-26 15:18:16 发布

阅读量3.2w

点赞数 7

CC 4.0 BY-SA版权

分类专栏：小程序

本文链接：https://blog.csdn.net/u013184970/article/details/104673915

小程序专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在微信小程序中使用删除按钮并结合提示框功能，通过具体示例讲解了布局文件与JS事件绑定的方法，以及如何设置提示框的各项属性。

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

微信小程序里面的提示框实现，先来张示例图：

先在.wxml里面写好布局文件，这里拿删除按钮作为示例：

  <!-- 删除按钮 -->
  <view class="buttonView">
    <text class="delete_button" bindtap="delete" data-index="{{index}}">删除</text>
  </view>

这里解释一下，点击事件用bindtap,delete是需要在.js文件里写的点击事件方法。bindtap="delete"是布局文件中删除按钮与.js文件里的删除方法绑定。下面看下.js里面删除方法，弹窗是在点击删除的时候弹出的，所以写在删除事件里面了：

  // 删除按钮点击事件
  delete:function(e){
    // 提示框
    wx.showModal({
      title: '提示',
      content: '确定删除？',
      success: function (res) {
        if (res.confirm) {
          console.log('确定')
        } else {
          console.log('取消')
        }
      }
    })
  },

下面对提示框用到的各属性做下解释：

title：提示标题；

content：提示内容；

showCancel：是否显示取消按钮；

cancelText：取消按钮的文字，最多 4 个字符；

cancelColor：取消按钮的文字颜色，必须是 16 进制格式的颜色字符串；

confirmText：确认按钮的文字，最多 4 个字符；

confirmColor：确认按钮的文字颜色，必须是 16 进制格式的颜色字符串；

success：调用成功的回调函数；

res.confirm：为 true 时，表示用户点击了确定按钮；

res.cancel：为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）；

布局文件中的data-index="{{index}}"，是获取列表当前行用的，在下一篇文章再讲。