uni-app中uni.showToast设置position: 'top'无效，显示在底部

在uni-app中，uni.showToast方法用于显示消息提示框。默认情况下，toast提示框会显示在屏幕底部中间位置。虽然官方文档中提到了position参数，但在实际使用中，特别是在某些平台（如微信小程序、H5等）上，position: 'top'可能并不会生效，这通常是由于平台限制或uni-app框架本身对toast位置的处理机制导致的。

针对这个问题，虽然我们不能直接通过uni.showToast的position参数改变toast的位置到顶部，但可以通过一些替代方案来实现类似的效果。以下是一个使用自定义模态框（modal）模拟顶部toast的示例代码：

// 自定义顶部Toast组件 (ToastTop.vue)
<template>
  <view v-if="visible" class="toast-top">
    <text>{{ message }}</text>
  </view>
</template>

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

<style scoped>
.toast-top {
  position: fixed;
  top: 20px; /* 根据需要调整位置 */
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 5px;
  z-index: 9999; /* 确保在最上层显示 */
}
</style>

// 使用自定义Toast组件
<template>
  <view>
    <button @click="showToast">显示顶部Toast</button>
    <ToastTop ref="toastTop" />
  </view>
</template>

<script>
import ToastTop from './ToastTop.vue';

export default {
  components: {
    ToastTop
  },
  methods: {
    showToast() {
      this.$refs.toastTop.show('这是一个顶部显示的Toast');
    }
  }
};
</script>

上述代码创建了一个自定义的ToastTop组件，通过CSS样式将其固定在屏幕顶部，并通过Vue的数据绑定和生命周期管理来实现显示和隐藏。这种方式虽然比直接使用uni.showToast复杂一些，但提供了更大的灵活性和自定义空间，可以适应更多不同的UI需求。