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

Question

我想通过向左或向右滑动来实现页面之间的导航，就像使用 TabView 一样。但是，似乎不会针对页面级别或跨越整个屏幕的布局触发滑动手势。 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

另一种在Nativescript8.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>

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

How to implement navigation between pages using swipe gestures in Nativescript

navigation

swipe

nativescript