Javascript Nativescript在ScrollView上未检测到刷卡事件

我正在尝试创建一个应用程序，在一个单独的页面中有几个按钮（每个按钮都响应一次点击），每个页面都应该通过滑动来访问。使用下面的代码，我可以让按钮响应点击，但滑动事件不能可靠地触发（在我点击底部标签后，它会工作）

page1.xml

<Page actionBarHidden="true" loaded="loaded" xmlns="http://schemas.nativescript.org/tns.xsd">
    <ScrollView orientation="horizontal" swipe="onSwipe">
        <GridLayout width="100%" height="100%" class="gridClass" rows="*, *, *, *, auto" columns="*, *, *, *" row="0" col="0">
            <Image src="~/images/btn1.png" row="0" col="0" tap="onTap" />
            <Image src="~/images/btn2.png" row="0" col="1" tap="onTap" />
            <Image src="~/images/btn3.png" row="0" col="2" tap="onTap" />
            <Image src="~/images/btn4.png" row="0" col="3" tap="onTap" />

            <Image src="~/images/btn5.png" row="1" col="0" tap="onTap" />
            <Image src="~/images/btn6.png" row="1" col="1" tap="onTap" />
            <Image src="~/images/btn7.png" row="1" col="2" tap="onTap" />
            <Image src="~/images/btn8.png" row="1" col="3" tap="onTap" />

            <Image src="~/images/btn9.png" row="2" col="0" tap="onTap" />
            <Image src="~/images/btn10.png" row="2" col="1" tap="onTap" />
            <Image src="~/images/btn11.png" row="2" col="2" tap="onTap" />
            <Image src="~/images/btn12.png" row="2" col="3" tap="onTap" />

            <Image src="~/images/btn13.png" row="3" col="0" tap="onTap" />
            <Image src="~/images/btn14.png" row="3" col="1" tap="onTap" />
            <Image src="~/images/btn15.png" row="3" col="2" tap="onTap" />
            <Image src="~/images/btn16.png" row="3" col="3" tap="onTap" />

            <Label id="banner" text="ad placeholder" row="4" colSpan="4" height="70" backgroundColor="blue" />
        </GridLayout>
    </ScrollView>
</Page>

更新

---

我最终使用该插件解决了这个问题，到目前为止效果很好，谢谢你的建议。

我认为这里根本不需要滚动视图，GridLayout是为了获得可用的宽度和高度，所以你也不必设置高度。删除它们，然后尝试将滑动事件附加到GridLayout。

最简单的滑动手势方法是TabView。是的，它不会是单独的页面。如果需要将内容分开，您可以始终将每个选项卡的内容放在单独的目录中，并将其作为自定义组件导入。

如果您打开以使用选项卡视图，则可以在iOS中隐藏选项卡栏

export function onLoaded(args: EventData) {
  const tabView = <TabView>args.object,
   tabBarController = tabView.ios;

  if (tabBarController) {
    setTimeout(() => {
     const frame = tabBarController.tabBar.frame;
     tabBarController.tabBar.frame = CGRectOffset(frame, 0, frame.size.height);
    }, 100);
   }
}

导出函数已加载（args:EventData）{
const tabView=args.object，
tabBarController=tabView.ios；
if（tabBarController）{
设置超时（（）=>{
const frame=tabBarController.tabBar.frame；
tabBarController.tabBar.frame=CGRectOffset（frame，0，frame.size.height）；
}, 100);
}
}

这是我最初尝试的，GridLayout不会对滑动手势做出响应，直到我尝试滑动/轻触底部的标签。如果你能创建一个游乐场示例，在那里可以重现问题，我可以看一看。我想到了这一点，但不想显示选项卡名称，我还没有看到任何方法可以完全删除它们在iOS上

export function onLoaded(args: EventData) {
  const tabView = <TabView>args.object,
   tabBarController = tabView.ios;

  if (tabBarController) {
    setTimeout(() => {
     const frame = tabBarController.tabBar.frame;
     tabBarController.tabBar.frame = CGRectOffset(frame, 0, frame.size.height);
    }, 100);
   }
}