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

我会带着你远行 2022-12-09 05:21 461阅读 0赞

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

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

###### 1： 纯文字提示框 ######

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

![莫成尘][20210708172547558.png_pic_center]

###### 2： 带有成功图标提示框 ######

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

![莫成尘][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzgyMTI4MQ_size_16_color_FFFFFF_t_70_pic_center]

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

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

![莫成尘][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzgyMTI4MQ_size_16_color_FFFFFF_t_70_pic_center 1]

###### 4： 带有图片提示框 ######

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

![莫成尘][20210708172842324.png_pic_center]

###### 5： 加载中提示框 ######

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

![莫成尘][20210708172926562.png_pic_center]

###### 7： 带有遮罩蒙版提示框 ######

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

![莫成尘][20210708173007856.png_pic_center]

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzgyMTI4MQ_size_16_color_FFFFFF_t_70_pic_center 2]  
![莫成尘][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzgyMTI4MQ_size_16_color_FFFFFF_t_70_pic_center 3]

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

[20210708172547558.png_pic_center]: /images/20221123/f05310dcdad4415ba0b301519a3c03b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzgyMTI4MQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/d46d1dc690fd4c4385f623f788395855.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzgyMTI4MQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/db18a81a945f4604946e236fbed4bcbb.png
[20210708172842324.png_pic_center]: /images/20221123/79db705092474d15adc26fef07dc2563.png
[20210708172926562.png_pic_center]: /images/20221123/dbfc61d647cf40c5a5c760e32b6fe6f5.png
[20210708173007856.png_pic_center]: /images/20221123/6bcb661f0809419aa0b1809de6e07cc5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzgyMTI4MQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/4403256a7f0b467e90ba92490b5abfe5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzgyMTI4MQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/5360c5095248469c8ce22e69c4ff0b6d.png