微信小程序-界面提示框和消息

一.Loading加载框

小程序提供了wx.showLoading用来在加载界面的时候使用,比如加载图片和数据的时候可以使用。

常常和wx.hideLoading()配合使用,否则加载框一直存在。

其效果如下:

代码如下:

复制代码
    //显示加载消息
    wx.showLoading({
      //提示内容不会换行,注意字数
      title: '数据加载...',
      //是否透明蒙层,防止触摸穿透
      mask:true
    })

        //关掉loading提示框,和showLoading连用
        wx.hideLoading()

二.模态对话框和消息提示框

模态对话框:wx.showModal 用来展示和用户的对话,比如是否删除,是否修改等。

消息提示框:wx.showToast 用来和模态对话框配合使用,比如删除成功,删除失败等。

模态对话框效果:

代码:

复制代码
    const {confirm} = await wx.showModal({
      title: '提示',
      content: '是否删除?'
      // complete: (res) => {
      //   if (res.cancel) {
          
      //   }
    
      //   if (res.confirm) {
          
      //   }
      // }
    })

消息对话框效果:

代码:

复制代码
      //显示消息提示框
       wx.showToast({
         title: '成功',
         icon:'none',
         duration:2000
       })
相关推荐
亮子AI1 小时前
【小程序】微信小程序点击效果(view、button、navigator)
微信小程序·小程序
Q_Q5110082851 小时前
python+uniapp基于微信小程序团购系统
spring boot·python·微信小程序·django·uni-app·node.js·php
future_studio2 小时前
聊聊 Unity(小白专享、C# 小程序 之 加密存储)
开发语言·小程序·c#
炒毛豆2 小时前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
從南走到北2 小时前
洗车小程序系统
微信小程序·小程序
namehu4 小时前
前端性能优化之:图片缩放 🚀
前端·性能优化·微信小程序
dazhong20124 小时前
微信小程序开发实战指南(三)-- Webview访问总结
微信小程序·小程序
计算机毕业设计小帅4 小时前
【2026计算机毕业设计】基于Springboot的校园失物招领小程序
spring boot·小程序·课程设计
盛夏绽放6 小时前
关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读
微信小程序·小程序·uni-app
流水线上的指令侠7 小时前
使用C#写微信小程序后端——电商微信小程序
微信小程序·小程序·c#·visual studio