uni-app 交互反馈

1.显示消息提示框 uni.showToast(OBJECT)

显示消息提示框

OBJECT参数说明：

参数	类型	必填	说明	平台差异说明
title	String	是	提示的内容，长度与 icon 取值有关。
icon	String	否	图标，有效值详见下方说明。
image	String	否	自定义图标的本地路径	App、H5、微信小程序、百度小程序
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false	App、微信小程序
duration	Number	否	提示的延迟时间，单位毫秒，默认：1500
position	String	否	纯文本轻提示显示位置，填写有效值后只有 title 属性生效， 有效值详见下方说明。	App
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

icon 值说明

值	说明	平台差异说明
success	显示成功图标，此时 title 文本最多显示 7 个汉字长度。默认值
loading	显示加载图标，此时 title 文本最多显示 7 个汉字长度。	支付宝小程序不支持
none	不显示图标，此时 title 文本在小程序最多可显示两行，App仅支持单行显示。

uni.showToast({
                title: 'welcome！',
                icon: 'success',
                duration:5000
            })

position 值说明（仅App生效）

值	说明
top	居上显示
center	居中显示
bottom	居底显示

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

OBJECT参数说明：

参数	类型	必填	说明	平台差异说明
title	String	是	提示的文字内容，显示在loading的下方
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false	App、微信小程序、百度小程序
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.showLoading({
                title:'加载中'
            })

3.隐藏loading 提示框  uni.hideLoading()

隐藏loading 提示框。

uni.showLoading({
                title:'欢迎使用App'
            });
            setTimeout(function () {
                uni.hideLoading();
            }, 2000);

 

4.显示模态弹窗  uni.showModal(OBJECT)

显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm。

OBJECT参数说明：

参数	类型	必填	说明	平台差异说明
title	String	否	提示的标题
content	String	否	提示的内容
showCancel	Boolean	否	是否显示取消按钮，默认为 true
cancelText	String	否	取消按钮的文字，默认为"取消"，最多 4 个字符
cancelColor	HexColor	否	取消按钮的文字颜色，默认为"#000000"	H5、微信小程序、百度小程序
confirmText	String	否	确定按钮的文字，默认为"确定"，最多 4 个字符
confirmColor	HexColor	否	确定按钮的文字颜色，H5平台默认为"#007aff"，微信小程序平台默认为"#3CC51F"，百度小程序平台默认为"#3c76ff"	H5、微信小程序、百度小程序
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数说明：

参数	类型	说明
confirm	Boolean	为 true 时，表示用户点击了确定按钮
cancel	Boolean	为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）

uni.showModal({
                    title: '提示',
                    content: '这是一个模态弹窗',
                    success: function (res) {
                        if (res.confirm) {
                            console.log('用户点击确定');
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });

5. 从底部向上弹出操作菜单  uni.showActionSheet(OBJECT)

 

OBJECT参数说明：

参数	类型	必填	说明	平台差异说明
itemList	Array<String>	是	按钮的文字数组	微信、百度、字节跳动小程序数组长度最大为6个
itemColor	HexColor	否	按钮的文字颜色，字符串格式，默认为"#000000"	App-iOS、字节跳动小程序不支持
popover	Object	否	大屏设备弹出原生选择按钮框的指示区域，默认居中显示	App-iPad（2.6.6+）、H5（2.9.2）
success	Function	否	接口调用成功的回调函数，详见返回参数说明
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

popover 值说明（仅App生效）

值	类型	说明
top	Number	指示区域坐标，使用原生 navigationBar 时一般需要加上 navigationBar 的高度
left	Number	指示区域坐标
width	Number	指示区域宽度
height	Number	指示区域高度

success返回参数说明：

参数	类型	说明
tapIndex	Number	用户点击的按钮，从上到下的顺序，从0开始

<template>
    <view>
        <button type="default" @click="skip">客服页面</button>
        <button type="default" @click="skipEquip">设备信息</button>
        <button type="default" @click="changePwd">修改密码</button>
    </view>
</template>
<script>
    var actions=['音乐','读书'];
    export default {
        data() {
            return {
                
            }
        },
        onLoad() {
            uni.request({
                url: 'https://demo.hcoder.net/index.php',
                method: 'POST',
                data: {name:'hcoder...','age':18},
                header: {'content-type':'application/x-www-form-urlencoded'},
                success:function(res)
                {
                    console.log(res);
                }
            })
        },
        methods: {
            skip:function(){
                uni.navigateTo({
                    url:'/pages/about/customer?name=kefu&age=18'
                });
            },
            skipEquip:function(){
                uni.navigateTo({
                    url:'/pages/about/equipment'
                });
            },
            changePwd:function(){
                // uni.showModal({
                //     title: '提示',
                //     content: '这是一个模态弹窗',
                //     success: function (res) {
                //         if (res.confirm) {
                //             console.log('用户点击确定');
                //         } else if (res.cancel) {
                //             console.log('用户点击取消');
                //         }
                //     }
                // });
                uni.showActionSheet({
                    itemList: actions,
                    success: function (res) {
                        var item=actions[res.tapIndex];
                        uni.showModal({
                            title: '提示',
                            content: item,
                            success: function (res) {
                                if (res.confirm) {
                                    console.log('用户点击确定');
                                } else if (res.cancel) {
                                    console.log('用户点击取消');
                                }
                            }
                        });
                    },
                    fail: function (res) {
                        console.log(res.errMsg);
                    }
                });
            }
        }
    }
</script>

<style>

</style>