uniapp加载各种弹窗和提示框

目录

一、模态弹窗（Modal）

二、loading提示框

三、消息提示框（Toast） 

---

 

一、模态弹窗（Modal）

效果图：

实现代码：

<template>
	<view>
		<button type="default" @tap="modalTap">有标题的modal</button>
		<button type="default" @tap="noTitlemodalTap">无标题的modal</button>
	</view>
</template>
<script>
export default {
	data() {
		return {};
	},
	methods: {
		modalTap: function(e) {
			uni.showModal({
				title: '弹窗标题',
				content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
				showCancel: false,
				confirmText: '确定'
			});
		},
		noTitlemodalTap: function(e) {
			uni.showModal({
				content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
				confirmText: '确定',
				cancelText: '取消'
			});
		}
	}
};
</script>

二、loading提示框

效果图：

代码实现：

<template>
	<view>
		<button @click="showLoading">显示 loading 提示框</button>
		<button @click="hideLoading">隐藏 loading 提示框</button>
	</view>
</template>
<script>
export default {
	data() {
		return {
		};
	},
	methods: {
		showLoading: function() {
			uni.showLoading({
				title: 'loading'
			});
		},
		hideLoading: function() {
			uni.hideLoading();
		}
	}
};
</script>

三、消息提示框（Toast） 

效果图：

代码实现：

<template>
	<view>
		<button type="default" @tap="toast1Tap">点击弹出默认toast</button>
		<button type="default" @tap="toast2Tap">点击弹出设置duration的toast</button>
		<button type="default" @tap="toast3Tap">点击弹出显示loading的toast</button>
		<button type="default" @tap="toast4Tap">点击弹出显示自定义图片的toast</button>
		<button type="default" @tap="hideToast">点击隐藏toast</button>
	</view>
</template>
<script>
export default {
	data() {
		return {};
	},
	methods: {
		toast1Tap: function() {
			uni.showToast({
				title: '默认'
			});
		},
		toast2Tap: function() {
			uni.showToast({
				title: 'duration 3000',
				duration: 3000
			});
		},
		toast3Tap: function() {
			uni.showToast({
				title: 'loading',
				icon: 'loading',
				duration: 5000
			});
		},
		toast4Tap: function() {
			uni.showToast({
				title: 'logo',
				image: '/static/uni.png'
			});
		},
		hideToast: function() {
			uni.hideToast();
		}
	}
};
</script>