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

【问题标题】：How to implement navigation between pages using swipe gestures in Nativescript如何在 Nativescript 中使用滑动手势实现页面之间的导航
【发布时间】：2016-04-27 22:25:43
【问题描述】：

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

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

【问题讨论】：

其他寻找这个的人应该在这里投票：nativescript.ideas.aha.io/ideas/NS-I-32

标签： navigation swipe nativescript

【解决方案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;

【讨论】：

【解决方案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"
       //   });

  }
}

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

【讨论】：

【解决方案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>

【讨论】：