微信小程序中具体写到几种常见的弹框提示信息和跳转页面的组件

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

user_3011

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

阅读量3.6w

点赞数 6

分类专栏：微信小程序开发文章标签：微信小程序中具体写到几种常见的弹框提示信息和跳转页面的组件

本文链接：https://blog.youkuaiyun.com/user_3011/article/details/80551809

版权

微信小程序开发专栏收录该内容

5 篇文章

订阅专栏

本文介绍微信小程序中常见的弹窗提示方式，包括模态窗口、简单的提示信息及加载中提示，并展示了如何通过wx.redirectTo实现页面跳转。

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

几种常见的弹框提示信息

第一种模态窗口:

wx.showModal

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    wx.showModal({
      title: '提示',
      content: '这是一个模态窗口',
      success:function(res){
            if(res.confirm){
              console.log('弹框后点取消')
            }else{
                console.log('弹框后点取消')
            }
      }
    })
  },

第二种提示你想提示的信息。不带确定和取消按钮。可以用在判断注册成功或失败的验证。

wx.showToast

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
   wx.showToast({
     title:'成功',
     icon:'success',
     duration:2000
   })
  },

第二种弹框的时候如果icon:none只是提示title里的文字不会有样式的弹框显示。

隐藏消息提示框

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   wx.showToast({
     title: '加载中',
     icon:'loading',
     duration:10000
 })
  setTimeout(function(){
   wx.hideToast()
   },2000)

  },

关闭当前页面，跳转到应用内的某个页面。

wx.redirectTo(OBJECT)

   wx.redirectTo({
     url: '../index/index',
   })