uni.app界面交互反馈之消息提示框

1.uni.showToast({}) 显示消息提示框。

常用属性：
title:页面提示的内容
image：改变提示框默认的icon图标
duration：提示框在页面显示多少秒才让它消失

添加了image属性后。

注意了，如果我们是去找iconfont的图标，最好选白色的图标rgb(255,255,255)，因为默认的背景色是灰色的，如果图标是其他颜色，会有色差跟背景不搭。

<template>
    <view class="content">
        <button type="primary" @tap="addData">添加数据</button>
    </view>
</template>

<script>
    export default {
        methods: {
            addData:() => {
                uni.showToast({
                    title:"数据删除成功！",
                    duration:2000,
                    position:200,
                    image:"../../static/delete.png"
                })
            }
        }
    }

此外呢，image属性还可以使用.gif图像，不过要找跟背景色一致的.gif图像，不然就像这样，格格不入。

2. uni.showLoading({})显示一个正在加载的动态图标，一般搭配uni.hideLoading({})使用，一个显示一个隐藏，同时uni.hideLoading({})一般和setTimeout()使用。

案例代码：

<template>
    <view class="content">
        <button type="primary" @tap="addData">添加数据</button>
    </view>
</template>

<script>
    export default {
        methods: {
            addData:() => {
                uni.showLoading({
                    title:"数据加载中！",
                })
                setTimeout(() => {
                    uni.hideLoading()
                    uni.showToast({
                        title:"数据加载完成！"
                    })
                },1500)
            }
        }
    }
</script>

3.uni.showModal({}) 显示模态弹窗,一般用来判断用户做出的选择，根据进一步触发逻辑。

可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 js中：alert、confirm。

属性很多，可以调文本颜色，文本内容输出，按钮显现与否等，具体看官方API.

<template>
    <view class="content">
        <button type="primary" @tap="addData">添加数据</button>
    </view>
</template>

<script>
    export default {
        methods: {
            addData: () => {
                uni.showModal({
                    title: '温馨提示！',
                    content: '据说林深时见鹿是真的！',
                    confirmColor: "#4CD964",
                    cancelColor: "#ffff00",
                    success: (res) => {
                        if (res.confirm) {
                            console.log('用户点击确定');
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            }
        }
    }
</script>

4.uni.showActionSheet({})从底部向上弹出操作菜单

<template>
    <view class="content">
        <button type="primary" @tap="addData">添加数据</button>
    </view>
</template>

<script>
    export default {
        methods: {
            addData: () => {
                uni.showActionSheet({
                    itemList: ['上传作业', '下载作业', '查看作业'],
                    success: function(res) {
                        console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
                    },
                    fail: function(res) {
                        console.log(res.errMsg);
                    }
                });
            }
        }
    }
</script>