uni-app uni.showToast 在iPad上样式错误

uni-app uni.showToast 在iPad上样式错误

开发环境 版本号 项目创建方式
Mac 10.15.5 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：3.1.11

手机系统：iOS

手机系统版本号：iOS 13.4

手机厂商：苹果

手机机型：ipad air 2

页面类型：vue

打包方式：离线

项目创建方式：HBuilderX

示例代码：

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title" @tap='showHandler'>消息提示框</text>  
            <text class="title" @tap='LoadHandler'>加载框</text>  
            <text class="title" @tap='modalHandler'>模态弹窗</text>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
            showHandler(){  
                uni.showToast({  
                    title:'消息提示框'  
                })  
            },  
            LoadHandler(){  
                uni.showLoading({  
                    title:'加载框'  
                })  
                setTimeout(()=>{  
                    uni.hideLoading()  
                },3000)  
            },  
            modalHandler(){  
                uni.showModal({  
                    title:'模态弹窗'  
                })  
            }  
        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        flex-direction: column;  
    }  

    .title {  
        border: 1rpx solid red;  
        padding: 10rpx;  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>



### 操作步骤：


```javascript
uni.showToast({  
    title:'消息提示框'  
})



### 预期结果：


```javascript
uni.showToast({  
    title:'消息提示框'  
})



### 实际结果：


```javascript
uni.showToast({  
    title:'消息提示框'  
})

更多关于uni-app uni.showToast 在iPad上样式错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app uni.showToast 在iPad上样式错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在iPad上，uni.showToast的样式问题通常是由于iOS设备对toast组件的默认渲染差异导致的。iPad的屏幕尺寸较大，而uni-app的toast组件默认设计可能未完全适配平板设备。

建议检查以下配置：

  1. 确认是否设置了position: 'center'或position: 'bottom'参数
  2. 尝试设置duration和icon属性看是否影响显示效果
  3. 在iPad上，可能需要通过CSS媒体查询单独调整toast样式

可以尝试以下代码调整：

uni.showToast({
    title: '消息提示框',
    position: 'bottom',
    duration: 2000
})
回到顶部