时间戳

首页 > 解决方案 > Nativescript 选项卡项无法触发点击功能

nativescript - Nativescript 选项卡项无法触发点击功能

问题描述

我正在尝试创建一个由两部分组成的可滚动标签导航栏和内容窗口。到目前为止，我制作的选项卡在点击时不会触发相关功能。

navbar.component.tns.html

<ScrollView orientation="horizontal" height="10%">
    <TabView>
        <StackLayout *tabItem="{title: 'Home'}" (tap)="tapHome()">
        </StackLayout>
        <StackLayout *tabItem="{title: 'Players'}" (tap)="tapPlayers()">
        </StackLayout>
        <StackLayout *tabItem="{title: 'Teams'}" (tap)="tapTeams()">
        </StackLayout>
        <StackLayout *tabItem="{title: 'Organizers'}" (tap)="tapOrganizers()">
        </StackLayout>
        <StackLayout *tabItem="{title: 'Tournaments'}" (tap)="tapTournaments()">
        </StackLayout>
    </TabView>
</ScrollView>

navbar.component.ts

import { Component, OnInit } from '@angular/core';
import { TabView, TabViewItem, SelectedIndexChangedEventData } from "tns-core-modules/ui/tab-view";
import { PrimaryWindowComponent } from '../primary-window/primary-window.component';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

  constructor(public window: PrimaryWindowComponent) { }

  ngOnInit() {
    console.log("navbar start!");
  }

  public tapHome(){
    console.log("tapHome pressed!");
  }
}

//export function 

export function tapPlayers(){

}

export function tapTeams(){

}

export function tapOrganizers(){

}

export function tapTournaments(args: GestureEventData){
  console.log("tapTournaments pressed!");
}

我试过 tap="function", (tap)="function", tap="function()", (tap)="function()", (tap)="{{function()}}", 和点击="{{函数()}}"。前四个不起作用，倒数第二个触发错误，最后一个导致预期的 ontap 函数在初始化后触发一次，然后从那里停止运行。

标签： nativescript

解决方案

您不应该包装TabViewinside ScrollView，它不需要或添加任何值。

 <TabView>
    <StackLayout *tabItem="{title: 'Home'}" (tap)="tapHome()">
    </StackLayout>
    <StackLayout *tabItem="{title: 'Players'}" (tap)="tapPlayers()">
    </StackLayout>
    <StackLayout *tabItem="{title: 'Teams'}" (tap)="tapTeams()">
    </StackLayout>
    <StackLayout *tabItem="{title: 'Organizers'}" (tap)="tapOrganizers()">
    </StackLayout>
    <StackLayout *tabItem="{title: 'Tournaments'}" (tap)="tapTournaments()">
    </StackLayout>
</TabView>

使用上面的代码片段，它应该允许点击事件。

推荐阅读