uniapp加载各种弹窗和提示框

逃离我推掉我的手 2021-07-26 02:32 1934阅读 0赞

**目录**

一、模态弹窗（Modal）

二、loading提示框

三、消息提示框（Toast）

--------------------

## 一、模态弹窗（Modal） ##

效果图：

![20210306181941533.gif][]

实现代码：

<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提示框 ##

效果图：

![20210306182216587.gif][]

代码实现：

<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）  ##

效果图：

![20210306182703474.gif][]

代码实现：

<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>

[20210306181941533.gif]: /images/20210725/6d29b02561e24af4becd620194f2e431.png
[20210306182216587.gif]: /images/20210725/12b7251816cf4b5ba90c0a99302ae260.png
[20210306182703474.gif]: /images/20210725/2749ba3681374aa980c14dbe507a6798.png