如何在 Nativescript 中使用滑动手势实现页面之间的导航

Question

我想像向左或向右滑动来实现页面之间的导航一样。但是，对于页面级别或跨越整个屏幕的布局，似乎不会触发轻扫手势。TabView 本身没有用，因为我有大量项目集合，用户可以滚动浏览，而且我不需要在屏幕上显示一堆选项卡。

有谁知道如何在 Nativescript 中实现这一点？

Answer 1

这是假设整个屏幕上的布局元素是一个有效的选项。

例如：

这是main-page.xml：

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:drawer="nativescript-telerik-ui/sidedrawer"  navigatingTo="navigatingTo" loaded="onLoaded">
    <StackLayout id="swipable">
        <Label text="Swipe to nabigate to next" textWrap="true" />  
    </StackLayout>
</Page>

这是main-page.js：

var stackModule = require("ui/layouts/stack-layout");
var gestures = require("ui/gestures");
var frameModule = require("ui/frame");
function onLoaded(args) {
    var page = args.object;
    var myStack = page.getViewById("swipable");
    myStack.on(gestures.GestureTypes.swipe, function (args) {
        frameModule.topmost().navigate({
            moduleName: "next-page"
        });
    });
}
exports.onLoaded = onLoaded;

Answer 2

这对

我有用

.XML：

// XML
<ScrollView row="0" orientation="horizontal" swipe="onSwipe">
   .... content.... 
</ScrollView>

JavaScript：

// javascript
function onSwipe(args) {    
var direction = args.direction;
console.log("Swipe Direction: " + direction); // 1 - left, 2 - right
if(direction === 1) {
    //topmost = require("ui/frame").topmost;
    frameModule.topmost().goBack(); // replace with func. below for navigation to other page
       // frameModule.topmost().navigate({
       // moduleName: "your/page"
       //   });
  }
}

这不会显示任何视觉滑动操作（无动画等）。

Answer 3

在 Nativescript 8.x（Svelte-Native）中进行滑动导航的另一种方法如下：

<page backgroundColor="#FFFFFF">
    <actionBar title="Page Title" backgroundColor="#FFFFFF" />
    <stackLayout backgroundColor="#FFFFFF" on:swipe="{goToPage}">     
    </stackLayout>
</page>
<script lang="ts">
    import { NextPage } from "next-page.svelte";
    /*
     * Note that navigate function can be substituted with
     * core Nativescript navigation if working in Vanilla 
     * Nativescript contrary to the Svelte JS framework
     * (alias Svelte-native) leveraged here!!!
    ,*/
    import { navigate } from "svelte-native";
    import { Frame } from "@nativescript/core";
    function goToPage(args? : any)
    {
          if(args.type && args.type === "swipe"){
             switch(args.direction){
                 case 1:
                   Frame.goBack();
                 break;
                 case 2:
                   navigate({
                       page: NextPage,
                       transition: { name: "slide" }
                   });
                 break;
                 default:
                 break;
             }
          }
    }
</script>