uniapp's common prompt box

1. Successful prompt box

A prompt will pop up after the execution of adding, deleting, modifying, checking, etc. is submitted successfully.

uni.showToast({
	title: '成功提示',
	//将值设置为 success 或者直接不用写icon这个参数
	icon: 'success',
	//显示持续时间为 2秒
	duration: 2000
})  

The effect is as follows:

If the icon parameter value is set to none , the "√" icon will not be displayed, and only text prompts will be displayed.

uni.showToast({
	title: '成功提示',
	icon: 'none',
	duration: 2000
})  

The effect is as follows:

2. Load the prompt box

 Prompts pop up during the execution of data query, page data rendering, etc. Take page rendering as an example:

//前端数据请求时，显示加载提示弹框
uni.showLoading({
	title: '加载中...'
});
// 数据从后端接口返回后，提示弹框关闭
uni.hideLoading();

The effect is as follows:

Same as above, set the icon parameter value to none , the loading icon will not be displayed, and only the text prompt will be displayed. 

 

3. Confirm the cancellation prompt box 

A prompt pops up when performing operations such as data deletion. 

uni.showModal({
		title: '提示',
		content: '确认删除该条信息吗？',
		success: function(res) {
		if (res.confirm) {
		    // 执行确认后的操作
		} 
		else {
			// 执行取消后的操作
		}
	}
})

 The effect is as follows:

 Customize the content of cancellation and confirmation (parameters: cancelText, confirmText ) and font color ( confirmColor, cancelColor ).

uni.showModal({
		title: '提示',
		// 提示文字
		content: '确认删除该条信息吗？',
		// 取消按钮的文字自定义
		cancelText: "取消",
		// 确认按钮的文字自定义
		confirmText: "删除",
		//删除字体的颜色
		confirmColor:'red',
		//取消字体的颜色
		cancelColor:'#000000',
		success: function(res) {
		if (res.confirm) {
			// 执行确认后的操作
		} 
		else {
			// 执行取消后的操作
		}
	}
})

 The effect is as follows:

4. List selection prompt box

 Prompt when performing certain list selections.

uni.showActionSheet({
	itemList: ['选项一', '选项二', '选项三'],
	success (res) {
	   // 选择其中任意一项后，获取其索引（res.tapIndex），从0开始
	   console.log(res.tapIndex) 
	},
	fail (res) {
	   // 取消后的操作
	}
})

The effect is as follows:

 If you need to set the font color, you can configure the itemColor parameter.

uni.showActionSheet({
	itemList: ['选项一', '选项二', '选项三'],
    // 字体颜色
	itemColor: "#55aaff",
	success (res) {
	   // 选择其中任意一项后，获取其索引（res.tapIndex），从0开始
	   console.log(res.tapIndex) 
	},
	fail (res) {
	   // 取消后的操作
	}
})

The effect is as follows:

Five, custom icon 

You can customize the display icon, such as png, jpg, gif and other formats.

uni.showToast({
	title: '查询中',
	//图片位置
	image: '../../static/loading.gif',
	duration: 2000    
})

 The effect is as follows: