uniapp微信小程序的各种弹框提示（轻提示）

您直接复制粘贴即可使用不需要做特殊的处理。

如您满意请给莫成尘点个Fabulous

1：纯文字提示框

uni.showToast({title: '只有文字弹窗',icon: 'none',    //如果要纯文本，不要icon，将值设为'none'duration: 2000    //持续时间为 2秒
})

2：带有成功图标提示框

uni.showToast({title: '成功提示弹窗',icon: 'success',    //将值设置为 success 或者 ''duration: 2000    //持续时间为 2秒
})

3：带有取消确认的提示框

uni.showModal({title: '有确认取消的弹窗',content: '确认要删除该项吗？',success: function(res) {if (res.confirm) {console.log('点击了确认')} else {console.log('点击了取消')}}
})

4：带有图片提示框

uni.showToast({title: '自定义图标弹窗',//图片优先级更高但您应该使用本地的而非线上的图片链接image: '../../static/logo.png',duration: 2000
})

5：加载中提示框

//showLoading 需要用hideLoading来结束，一般网络请求封装中常用
uni.showLoading({title:'加载中...'
});
setTimeout(()=>{uni.hideLoading()
},2000)

7：带有遮罩蒙版提示框

//如果有透明蒙层，相当于全屏 不能做其他操作如点击事件
uni.showToast({title: '遮罩层的弹窗',duration: 2000,mask: true //是否有透明蒙层，默认为false
})

7：有列表（上拉列表）提示框

uni.showActionSheet({itemList: ['A', 'B', 'C'],success (res) {console.log(res.tapIndex)},fail (res) {console.log(res.errMsg)}
})

附加和可能出现的有用信息已添加注释
其他有关uniapp的疑问或者此方法不理解的地方您可留言，我会尽快回复并帮您解决。

uniapp微信小程序的各种弹框提示（轻提示）相关推荐

vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...
微信小程序之底部弹框预约插件
代码地址如下: http://www.demodashi.com/demo/13982.html 一.前期准备工作: 软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq. ...
若依前后端分离发布富文本框内容 | uni-app微信小程序展示富文本框内容
微信小程序端引入富文本样式富文本提交图片json error 一.展示示例: 1.PC端前端发布界面可以设置文字大小,居中,可以插入图片,设置图片大小,居中. 2.小程序端展示二.基于若依框架踩 ...
微信小程序自定义picker弹框组件
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 柚子写项目遇到了一个问题,就是微信小程序官方文档上面的弹框组件picker,它 ...
微信小程序之model弹框
小程序model表达形式一般有两种: 1. 第一种: wxml: <button type="primary" bindtap="click">按钮 ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
微信小程序点击按钮弹出弹窗_微信小程序开发弹出框实现方法
本文主要和大家分享微信小程序开发弹出框实现方法,本文所分享的代码很清晰,希望能帮助到大家. 消息提示框模态弹窗操作菜单 1.消息提示--wx.showToast(OBJECT) //show.js ...
【微信小程序封装底部弹出框二】
[微信小程序封装底部弹出框二]  <view><button style="margin-top: 300px;" ...

uniapp微信小程序的各种弹框提示（轻提示）

您直接复制粘贴即可使用不需要做特殊的处理。

如您满意请给莫成尘点个Fabulous

1：纯文字提示框

2：带有成功图标提示框

3：带有取消确认的提示框

4：带有图片提示框

5：加载中提示框

7：带有遮罩蒙版提示框

7：有列表（上拉列表）提示框

uniapp微信小程序的各种弹框提示（轻提示）相关推荐

最新文章

热门文章

uniapp微信小程序的各种弹框提示（轻提示）

您直接复制粘贴即可使用不需要做特殊的处理。

如您满意请给莫成尘点个Fabulous

1： 纯文字提示框

2： 带有成功图标提示框

3： 带有取消确认的提示框

4： 带有图片提示框

5： 加载中提示框

7： 带有遮罩蒙版提示框

7： 有列表（上拉列表）提示框

uniapp微信小程序的各种弹框提示（轻提示）相关推荐

最新文章

热门文章

1：纯文字提示框

2：带有成功图标提示框

3：带有取消确认的提示框

4：带有图片提示框

5：加载中提示框

7：带有遮罩蒙版提示框

7：有列表（上拉列表）提示框