uni-app中app.vue除了showModal外还有其它弹窗的API吗

发布于 1周前 作者 itying888 来自 Uni-App

uni-app中app.vue除了showModal外还有其它弹窗的API吗

问题描述

app.vue 中添加弹窗，只能用 uni.showModal 吗？这个方法不能根据条件在 onshow 时关闭，只能通过点击弹窗底部的按钮实现关闭！是否有其它方法？

Harmonyos Next教程
7 回复

可以试试uni.hideModal()来关闭看看，你看看能不能用，打包之后还能不能使用


不行，报错；
[JS Framework] Failed to execute the callback function: 17:27:49.422 TypeError: uni.hideModal is not a function. (In ‘uni.hideModal()’, ‘uni.hideModal’ is undefined) __ERROR

好吧，看来只有h5能用。。那就只能使用页面模拟弹窗了

回复 靐齉齾麤龖龗: 需求是需要在app打开时弹窗,如果打开app前app停留在"我的页",则需要在此页上显示;如果之前app停留在首页,需要在首页上显示;因为这个不确定,所以只能加在app.vue中,app.vue中又不能加 template 页面标签

试试这个插件和这个插件或者去插件市场搜modal

这个插件好用，谢谢您！！

在uni-app中，除了showModal之外，确实还有其他几种用于显示弹窗的API。这些API提供了更丰富的弹窗样式和功能，以适应不同的需求。以下是一些常用的弹窗API及其示例代码：

  1. showToast：用于显示简单的提示信息。
uni.showToast({
    title: '提示信息',
    icon: 'success', // 可选值：'success'、'loading'、'none'
    duration: 2000 // 持续显示的时间，单位为毫秒，默认1500ms
});
  1. showLoading：显示加载提示框。
uni.showLoading({
    title: '加载中...',
    mask: true // 是否显示透明蒙层，防止触摸穿透
});

// 隐藏加载提示框
setTimeout(() => {
    uni.hideLoading();
}, 3000);
  1. showActionSheet：显示操作菜单。
uni.showActionSheet({
    itemList: ['选项1', '选项2', '选项3'],
    success: function (res) {
        console.log('用户点击了第' + (res.tapIndex + 1) + '个按钮');
    },
    fail: function (err) {
        console.error(err);
    }
});
  1. setNavigationBarTitleText：虽然这不是一个直接的弹窗API，但可以用来在导航栏上显示提示信息，有时也可以作为一种轻量级的提示方式。
uni.setNavigationBarTitleText({
    title: '新的标题'
});
  1. 自定义弹窗组件：如果你需要更复杂的弹窗，比如带有输入框、多选按钮等，可以创建一个自定义的弹窗组件。这通常涉及在pages或components目录下创建一个新的Vue组件，并在需要时动态地显示和隐藏它。

例如，创建一个名为MyCustomDialog.vue的组件：

<template>
    <view v-if="visible" class="dialog">
        <!-- 弹窗内容 -->
        <button @click="closeDialog">关闭</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            visible: false
        };
    },
    methods: {
        showDialog() {
            this.visible = true;
        },
        closeDialog() {
            this.visible = false;
        }
    }
};
</script>

然后在其他页面中引入并使用这个组件：

<template>
    <view>
        <button @click="showMyDialog">显示自定义弹窗</button>
        <MyCustomDialog ref="myDialog" />
    </view>
</template>

<script>
import MyCustomDialog from '@/components/MyCustomDialog.vue';

export default {
    components: {
        MyCustomDialog
    },
    methods: {
        showMyDialog() {
            this.$refs.myDialog.showDialog();
        }
    }
};
</script>

这些API和自定义组件可以满足uni-app中大多数弹窗需求。

回到顶部