Question

我想用右上角的关闭按钮创建自己的模式布局。

我想出了一些办法，但是有太多问题，特别是在IOS上，我会发布它，但让我不要重复它所遇到的问题，因为我敢肯定人们可以使用和解决这个问题的通用解决方案。我不坚持自己的实现方式，我只是想要某种性能，如我所愿。

这是我的实现方式：

<template>
  <ScrollView>
    <GridLayout rows="*" columnts="*,auto">
      <GridLayout 
        row="0"
        col="1"
        opacity=".5"
        @tap="$modal.close"
      >
        <label class="fas" color="white" :text="'fa-circle' | iconmap" />
        <label class="fas" color="black" :text="'fa-times-circle' | iconmap" />
      </GridLayout>
      <StackLayout col="0" row="0">
        <!-- The content of my modal -->
      </StackLayout>
    </GridLayout>
  </ScrollView>
</template>

我也希望它看起来像这样：

<template>
  <ScrollView>
    <StackLayout col="0" row="0">
      <!-- The content of my modal -->
    </StackLayout>
  </ScrollView>
</template>

除了右上角的小方块位于所有内容（z-index）的上方，如果用户单击它，则模态将关闭。我希望它对页面的其余部分产生零影响，而只是独立出现在右上角，在所有其他内容之上。

有两种非常常见的用法。一种是将粘性按钮固定在一个位置，另一种是使按钮沿内容滚动。我的实现正在做后者，但我的目标是在这里找到一种解决方案。

Answer 1

通过nstudio/nativescript-floatingactionbutton

我获得了我想要的东西

tns plugin add @nstudio/nativescript-floatingactionbutton

在main.js

import Vue from 'nativescript-vue';

Vue.registerElement(
  'Fab',
  () => require('@nstudio/nativescript-floatingactionbutton').Fab
);

我的模态组件：

<template>
  <GridLayout>
    <VerticalCenterScroll>
      <slot />
    </VerticalCenterScroll>
    <fab @tap="close()" row="1" text="×" rippleColor="#f1f1f1" class="fab-button"/>
  </GridLayout>
</template>

<script>
  export default {
    methods: {
      close() {
        if (this.$modal.close) this.$modal.close();
        else $emit('close');
      },
    },
  };
</script>

<style scoped>
  .fab-button {
    height: 50;
    width: 50;
    margin: 15;
    background-color: silver;
    horizontal-align: right;
    vertical-align: top;
    color: black;
  }
</style>

由于某些模态和某些模态中的框架导航，您只能使用this.$modal.close()这个功能。

效果很好。我对这个出色的插件感到非常满意。

如何在nativescript的右上角设置关闭按钮？

1 个答案: