界面交互反馈：显示消息提示框、显示 loading 提示框、隐藏 loading 提示框、显示模态弹窗、显示操作菜单（手机底部弹起弹窗）

雨点打透心脏的1/2处 2023-06-15 09:56 26阅读 0赞

### 显示消息提示框： ###

<template>
    	<view class="content">
    		<view @click="test">界面交互反馈</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		methods: {
    			test() {
    				uni.showToast({
    					title: '标题',
    					duration: 2000
    				});
    			}
    		}
    	}
    </script>
    
    <style scoped lang="scss">
    	.content {}
    </style>

### 详细介绍显示消息提示框，官方地址链接：[https://uniapp.dcloud.io/api/ui/prompt?id=showtoast][https_uniapp.dcloud.io_api_ui_prompt_id_showtoast] ###

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

### 显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。 ###

<template>
    	<view class="content">
    		<view @click="test">界面交互反馈</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		methods: {
    			test() {
    				uni.showLoading({
    					title: '加载中',
    					success: () => {
    						setTimeout(function() {
    							uni.hideLoading();
    						}, 2000)
    					}
    				});
    			}
    		}
    	}
    </script>
    
    <style scoped lang="scss">
    	.content {}
    </style>

### 详细介绍显示与隐藏 loading 提示框（开启与自动关闭），官方地址链接： ###

### [https://uniapp.dcloud.io/api/ui/prompt?id=hidetoast][https_uniapp.dcloud.io_api_ui_prompt_id_hidetoast] ###

### [https://uniapp.dcloud.io/api/ui/prompt?id=hideloading][https_uniapp.dcloud.io_api_ui_prompt_id_hideloading] ###

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

### 显示模态弹窗，类似于标准 html 的消息框：alert、confirm。 ###

<template>
    	<view class="content">
    		<view @click="test">界面交互反馈</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		methods: {
    			test() {
    				uni.showModal({
    				    title: '提示',
    				    content: '这是一个模态弹窗',
    				    success: function (res) {
    				        if (res.confirm) {
    				            console.log('用户点击确定');
    				        } else if (res.cancel) {
    				            console.log('用户点击取消');
    				        }
    				    }
    				});
    			}
    		}
    	}
    </script>
    
    <style scoped lang="scss">
    	.content {}
    </style>

### 详细介绍显示模态弹窗，官方地址链接：[https://uniapp.dcloud.io/api/ui/prompt?id=showmodal][https_uniapp.dcloud.io_api_ui_prompt_id_showmodal] ###

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

### 显示操作菜单： ###

<template>
    	<view class="content">
    		<view @click="test">界面交互反馈</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		methods: {
    			test() {
    				uni.showActionSheet({
    					itemList: ['拍照', '打开图库'],
    					success: function(res) {
    						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
    					},
    					fail: function(res) {
    						console.log(res.errMsg);
    					}
    				});
    			}
    		}
    	}
    </script>
    
    <style scoped lang="scss">
    	.content {}
    </style>

### 详细介绍显示操作菜单，官方地址链接：[https://uniapp.dcloud.io/api/ui/prompt?id=showactionsheet][https_uniapp.dcloud.io_api_ui_prompt_id_showactionsheet] ###

[https_uniapp.dcloud.io_api_ui_prompt_id_showtoast]: https://uniapp.dcloud.io/api/ui/prompt?id=showtoast
[https_uniapp.dcloud.io_api_ui_prompt_id_hidetoast]: https://uniapp.dcloud.io/api/ui/prompt?id=hidetoast
[https_uniapp.dcloud.io_api_ui_prompt_id_hideloading]: https://uniapp.dcloud.io/api/ui/prompt?id=hideloading
[https_uniapp.dcloud.io_api_ui_prompt_id_showmodal]: https://uniapp.dcloud.io/api/ui/prompt?id=showmodal
[https_uniapp.dcloud.io_api_ui_prompt_id_showactionsheet]: https://uniapp.dcloud.io/api/ui/prompt?id=showactionsheet