微信小程序交互组件：消息提示框与模态对话框 API 指南

最新推荐文章于 2025-04-23 07:30:00 发布

前端基地

最新推荐文章于 2025-04-23 07:30:00 发布

阅读量823

点赞数 18

分类专栏： 07微信小程序从入门到精通文章标签：微信小程序小程序 showToast showModal showToast案例 showModal案例微信小程序案例

本文链接：https://blog.csdn.net/chinayun_6401/article/details/146389499

版权

wx.showToast

wx.showModal

非 VIP 用户可前往公众号“前端基地”进行免费阅读，文章链接如下：

微信小程序交互组件：消息提示框与模态对话框 API 指南

wx.showToast

显示消息提示框

示例代码如下：

showToast.wxml

<view class="w flex">
  <button type="primary" bindtap="showSuccessToast">显示成功图标</button>
  <button type="warn" bindtap="showErrorToast">显示失败图标</button>
  <button type="primary" bindtap="showLoadingToast">显示加载图标</button>
  <button type="primary" bindtap="showNoneToast">不显示图标</button>
  <button type="primary" bindtap="showDiyToast">自定义图标</button>
</view>

showToast.js

Page({
  showErrorToast(){
    wx.showToast({
      title: '显示失败图标',
      icon:'error'
    })
  },
  showSuccessToast(){
    wx.showToast({
      title: '显示成功图标'
    })
  },
  showLoadingToast(){
    wx.showToast({
      title: '显示加载图标',
      icon:'loading'
    })
  },
  showNoneToast(){
    wx.showToast({
      title: '不显示图标',
      icon:'none'
    })
  },
  showDiyToast(){
    wx.showToast({
      title: '自定义图标',
      image:'../../images/icon.jpg'
    })
  }
})

运行结果：