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>

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值