UniAPP常用提示框，非弹出框

╰半橙微兮° 2022-09-03 00:15 454阅读 0赞

UniAPP中几个常用提示框

# 一、成功提示框 #

类似于alert的那种提示框，一般都是提交表单的时候，提交成功弹出的提示框。

![20210804153152651.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70][]

uni.showToast({
    	title: '提交成功',
        image:'/static/lost.png',   //可省略不写，默认是对钩图标，要写根路径，不要写相对路径
    	duration: 2000
    });

#  #

# 二、加载框 #

![20210804153223818.png][]

uni.showLoading({
    	title: '加载中'
    });
    
    setTimeout(function () {
    	uni.hideLoading();
    }, 2000);   //加载框自动隐藏

# 三、只显示文字的提示框，不用图标 #

![20210804153333964.png][]

uni.showToast({
    	title: '请填写员工工号',
    	icon:'none',
    	duration: 2000
    });

# 四、有确认取消的，模态弹窗 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 1][]

uni.showModal({
    	title: '提示',
    	content: '这是一个模态弹窗',
    	success: function (res) {
    		if (res.confirm) {
    			console.log('用户点击确定');
    		} else if (res.cancel) {
    			console.log('用户点击取消');
    		}
    	}
    });

[20210804153152651.png]: /images/20220829/bc76c4730b0e4397b5d615a5a21a1e74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70]: /images/20220829/89259e0fa7694c09aa3d501685afe8b1.png
[20210804153223818.png]: /images/20220829/fe6c128bcf474cfba15e594445fa88a8.png
[20210804153333964.png]: /images/20220829/af0afdf33f6c4c63bd2d4725841ff4a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 1]: /images/20220829/8490a494ecce4c3f89bb60d92f11775d.png