微信小程序 四种弹窗方式

news2024/11/18 13:36:57

微信小程序弹窗

  • 一、wx.showToast(Object object)
  • 二 、wx.showModal(Object object)
  • 三、wx.showLoading(Object object)
  • 四、wx.showActionSheet(Object object)
    • 五、官方文档

一、wx.showToast(Object object)

显示消息提示框

  wx.showToast({
     title: '内容', //提示的内容
     duration: 2000, //持续的时间
     icon: 'loading', //图标有success、error、loading、none四种
     mask: true //显示透明蒙层 防止触摸穿透
  })

示例
在这里插入图片描述

二 、wx.showModal(Object object)

显示模态对话框

  wx.showModal({
    title: '我是标题', //提示的标题
    content: '我是内容', //提示的内容
    success: function(res) {
      if(res.confirm) {
        console.log('用户点击了确定')
      } else if (res.cancel) {
        console.log('用户点击了取消')
      }
    }
  })

示例
在这里插入图片描述
在这里插入图片描述

三、wx.showLoading(Object object)

显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框

wx.showLoading({
  title: '加载中',
})

setTimeout(function () {
  wx.hideLoading()
}, 2000)

示例:
在这里插入图片描述

注意:

  • wx.showLoading 和 wx.showToast 同时只能显示一个
  • wx.showLoading 应与 wx.hideLoading 配对使用

四、wx.showActionSheet(Object object)

显示操作菜单

 wx.showActionSheet({
   itemList:['选项一','选项二','其它'], //文字数组
   success: (res) => {
     switch(res.tapIndex) {
       case 0:
         console.log('点击了 选项一')
         break;
       case 1:
         console.log('点击了 选项二')
         break;	
       case 2:
         console.log('点击了 其它选项')
         break;
     }
   },
   fail (res) {
     console.log('取消选项')
   }
 })

示例:
在这里插入图片描述
在这里插入图片描述

五、官方文档

具体参数可见官网:微信小程序弹窗

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409506.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

uniapp web-view加载本地html

有个需求需要加载本地的html,用uniapp的官网demo和文档进行操作一直有问题,现在给大家排排雷: demo:https://hellouniapp.dcloud.net.cn/pages/component/web-view-local/web-view-local 文档:https://uniapp.dcloud.n…

scrollTop、clientHeight、 scrollHeight...学完真的理解了

在开发中我们常常会用到判断滚动条是否触底的逻辑。我一般都会在网上搜一段代码,这段代码有用到scrollTop、clientHeight、 scrollHeight 。接着我简单看一下好像理解了,再在项目里用一下好使了就没去深入研究相关概念。等下次用到了还是搜一下&#xff…

【Vue】图片拉近、全屏背景实战经验总结

文章目录1 图片拉近2 全屏背景2.1 background-attachment2.2 background-size2.3 display:flex;2.4 flex-direction2.5 100vh1 图片拉近 缘起是看到了下面的图片,我发现当鼠标悬浮的时候,发现他是可以拉近的,也就是图片的宽高不变&#xff0…

【学姐面试宝典】—— 前端基础篇Ⅱ(HTTP/HTML/浏览器)

前言 博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻【前端面试专栏】 今天继续学习前端面试题相关的知识! 感兴趣的小伙伴一起来看看吧~🤞 文章目录Doctype 作用,严格模式与混杂模式如何区分&#x…

关于uni-app入门看完这篇就够了

关于uni-app的入门 前言 这是一篇关于uni-app入门的文章,也是我对uni-app的总结与归纳,刚开始的时候在这个平台上面找寻同类型的文章的时候发现讲的都很片面不怎么详细,所以就写了一篇关于基本入门的文章,全文总计 7500 字 预计…

Vue 清除Form表单校验信息 清除表单验证上次提示信息

问题描述 在Vue项目中使用Form组件进行表单验证,再次打开该表单时,上次的验证提示信息依然存在,业务场景要求再次打开该表单时清除验证提示信息和绑定的数据。 解决办法 在控制表单显隐的方法内加入以下代码即可实现: 1.使用…

react性能优化之memo的作用和memo的坑

前言 在react中,组件渲染的是最常有的事情。但是,有部分的渲染是不必要的,是可以避免的。 在react的一般规则中,只有父组件的某一个状态改变,父组件下面所有的子组件不论是否使用了该状态,都会进行重新渲…

[vue+element-ui] form中输入框无法输入问题的解决方法

目录 一.问题发现: 二.正确案例与错误原理: 三.问题解决 一.问题发现: 笔者在制作登录页面前端时使用elementuivue技术,发现输入框无法输入任何内容。 在csdn上查阅很多文章后发现都无法解决,于是去elementui官网进…

谷歌浏览器插件HackBar安装方法(详细教程)

文章目录1.下载压缩包2.将压缩包添加至扩展程序3.修改配置文件4.功能说明1.下载压缩包 链接:https://pan.baidu.com/s/1XOKo_ILZv8PcJihoc8981A?pwd3ha8 提取码:3ha8 注意:下载即可,不用解压。 2.将压缩包添加至扩展程序 打开…

【小程序项目开发-- 京东商城】uni-app之自定义搜索组件(中)-- 搜索建议

🤵‍♂️ 个人主页: 计算机魔术师 👨‍💻 作者简介:CSDN内容合伙人,全栈领域优质创作者。 🌐 推荐一款找工作神器网站: 点击跳转牛客网 |笔试题库|面试经验|实习招聘内推| 还没有账户的小伙伴 速速点击链接…

文本超出部分显示省略号

我们经常在网站上可以看到以下样式,标题太长,一行显示不下,则会使用省略号来代替。但是事实上,这个省略号并不是打字打上去的,而是使用代码表示出来的。 今天则主要介绍如何让文本超出部分显示省略号。 1.单行文本超出…

关于HTML中常用选择器

一.五种基本选择器: 1)*:匹配HTML中所有元素,一般用于除去内边距和外边距,其性能较差,不推荐使用; 2)标签名(在JavaScript中也称节点):标签选择器。注意在用标签修改样式…

如何创建一个Servlet项目(Maven)?

系列文章目录 Tomcat下载、安装及使用介绍_crazy_xieyi的博客-CSDN博客 文章目录 前言一、创建Servlet项目(Maven)的步骤 1.创建Maven项目2.引入依赖3.创建目录4.编写代码5.打包程序6.部署程序7.验证程序二、总结(使用smart tomcat插件来打包…

微信小程序开发前端基础知识

文章目录一、简介1、是什么2、为什么二、准备工作1、环境准备1.1、注册账号1.2、获取APPID1.3、开发工具2、创建微信小程序三、组件1、目录及其作用介绍2、页面操作3、view 块级元素4、<navigator>导航跳转5、scroll-view滚动6、text 行标签7、swiper 轮播8、常用表单组件…

Vue语法与标签的使用

前言&#xff1a;最近两周一直在忙于公司业务的学习&#xff0c;一直没有时间进行总结&#xff0c;作为后端开发人员来说&#xff0c;需要了解一些前端的知识&#xff0c;因此今天把最近复习的Vue的知识总结了一下&#xff0c;希望能加深总结的印象以及帮助到各位大佬。 如果有…

React 入门(超详细)

目录前言&#xff1a;一、React 简介1. 什么是 React2. React 的特点3. React 高效的原因4. React 官网5. React的主要原理6. Facebook为什么要建造React?二、React 的基本使用1. 基础代码2. 效果3. 相关 js 库4. 创建虚拟DOM的两种方式5. 虚拟DOM与真实DOM6. 虚拟DOM与真实DO…

Chrome谷歌浏览器安装与配置教程

谷歌浏览器&#xff0c;界面简洁明了、浏览速度相当快&#xff0c;浏览器中的霸主地位 1、在电脑浏览器中打开下载地址https://www.google.cn/chrome/或百度www.baidu.com搜索“chrome”&#xff0c;打开谷歌官方网站 2、进入官网后单击“下载Chrome” 如果下载之后找不到&a…

vue基于element实现动态表格

前言 大家都知道 element 表格组件的表头是静态写死的&#xff0c;我们在渲染数据时只需要将接口返回的数组动态绑定给 data 属性&#xff0c;然后再通过 prop 去对应字段项即可&#xff1b;但是静态的表头并不能满足一些特殊的使用场景&#xff0c;所以我们需要将它变成活的&a…

从0到1构建springboot web应用镜像并使用容器部署

文章目录一、生成镜像的两种方法1.1、使用commit生成镜像1.1.1、拉取Centos基础镜像1.1.2、启动Centos容器并安装Go1.1.3、commit生成新镜像1.1.4、使用新镜像验证Golang环境1.2、使用Dockerfile生成镜像二、基于Dockerfile生成一个springboot镜像2.1、准备springboot应用jar包…

Vue父子组件传值

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录前言一、Vue父子传值的方法二、方法详解1.props / $emit2.$parent / children3.$ref总结前言 例如&#xff1a;Vue的学习是路阻且艰的&#xff0c;这是一个系列文章…