Usage example of uniapp interactive feedback api

Official document link:uni.showToast(OBJECT) | uni-app official website

1.uni.showToast({}) displays the message prompt box.

Common attributes:
title: Content of the page prompt
image: Change the default icon of the prompt box
duration: how many seconds the prompt box is displayed on the page before it disappears

After adding the image attribute.

Note, if we are looking for an iconfont icon, it is best to choose a white icon rgb (255, 255, 255), because the default background color is gray. If the icon is other colors, there will be a color difference that does not match the background.

<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"
                })
            }
        }
    }

In addition, the image attribute can also use .gif images, but you need to find a .gif image that is consistent with the background color, otherwise it will look out of place like this.

2. uni.showLoading({}) displays a loading dynamic icon. It is generally used with uni.hideLoading({}), one is displayed and the other is hidden. At the same time, uni.hideLoading({}) is generally used with setTimeout().

Case code:

<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({}) displays a modal pop-up window, which is generally used to judge the choice made by the user and trigger further logic based on it.

There can be only one OK button, or both OK and Cancel buttons. It is similar to an API that integrates alert and confirm in js.

There are many attributes, you can adjust text color, text content output, button display or not, etc. See the official API for details:

<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({}) pops up the action menu from the bottom up

Code example: 

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