Question

我正在尝试创建一个在单独页面中具有多个按钮（每个按钮都响应一个点击）的应用程序，应使用滑动键访问每个页面。使用以下代码，我获得了响应轻击的按钮，但是滑动事件无法可靠触发（在我轻按底部标签后才可以工作）

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>

page1.js

function loaded(args) {
  // do something on page load
}

function playAudio(args) {
    // play some audio
}

function onTap(args) {
   playAudio(args)
}

function onSwipe(args) {
    // transition to next page
}

exports.onTap = onTap;
exports.onSwipe = onSwipe;
exports.loaded = loaded;

更新

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

Answer 1

我在这里完全不需要ScrollView，因为GridLayout可以采用可用的宽度和高度，因此您不必设置高度。删除它们，然后尝试将滑动事件附加到GridLayout。

Answer 2

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

Answer 3

如果您准备使用TabView，可以使用here在iOS中隐藏TabBar。

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);
   }
}

Nativescript未在ScrollView上检测到滑动事件

3 个答案: