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

一.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
       })
相关推荐
2501_9151063226 分钟前
HTTPS 爬虫实战指南 从握手原理到反爬应对与流量抓包分析
爬虫·网络协议·ios·小程序·https·uni-app·iphone
2501_9160074726 分钟前
iOS 上架技术支持全流程解析,从签名配置到使用 开心上架 的实战经验分享
android·macos·ios·小程序·uni-app·cocoa·iphone
阿登林44 分钟前
如何利用扣子生成小程序并进行发布指南
小程序·扣子
全职计算机毕业设计2 小时前
基于微信小程序的运动康复中心预约系统的设计与实现(SpringBoot+Vue+Uniapp)
vue.js·spring boot·微信小程序
流***陌10 小时前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
Tencent_TCB10 小时前
云开发CloudBase AI+实战:快速搭建AI小程序全流程指南
人工智能·ai·小程序·ai编程·云开发
说私域13 小时前
“开源AI大模型AI智能名片S2B2C商城小程序”视角下的教育用户策略研究
人工智能·小程序
2501_9160074716 小时前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone
一匹电信狗18 小时前
【MySQL】数据库表的操作
linux·运维·服务器·数据库·mysql·ubuntu·小程序
2501_915921431 天前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone