当前位置：首页 > uni-app

uniapp 卡片提示

2026-03-05 04:20:46uni-app

uniapp 卡片提示实现方法

在 uniapp 中实现卡片提示效果，可以通过多种方式完成，以下是一些常见的实现方法：

使用 uni.showToast 方法

uni.showToast({
    title: '提示内容',
    icon: 'none',
    duration: 2000,
    position: 'bottom'
})

通过设置 position 为 bottom 可以让提示显示在底部，类似卡片效果。icon 设置为 none 可以不显示图标。

自定义组件实现 创建一个自定义组件，通过绝对定位和动画效果实现卡片式提示：

<template>
    <view class="card-toast" v-if="show">
        <view class="card-content">
            {{ message }}
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            show: false,
            message: ''
        }
    },
    methods: {
        showToast(msg, duration = 2000) {
            this.message = msg
            this.show = true
            setTimeout(() => {
                this.show = false
            }, duration)
        }
    }
}
</script>

<style>
.card-toast {
    position: fixed;
    bottom: 100rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}
.card-content {
    background-color: #fff;
    padding: 20rpx 30rpx;
    border-radius: 10rpx;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.15);
}
</style>

使用 uni-popup 组件 uniapp 官方扩展组件库中的 uni-popup 也可以实现卡片提示效果：

<uni-popup ref="popup" type="bottom">
    <view class="popup-content">
        这里是卡片提示内容
    </view>
</uni-popup>

动画效果增强 为卡片提示添加动画效果可以提升用户体验：

@keyframes slideUp {
    from {transform: translateY(100%); opacity: 0;}
    to {transform: translateY(0); opacity: 1;}
}
.card-toast {
    animation: slideUp 0.3s ease-out;
}

注意事项

uniapp 卡片提示