Question

我是NativeScript的新手，Brad Martin（https://stackoverflow.com/users/1893557/brad-martin）建议Slack频道从这里询问。所以请不要回答来自Slack的问题。

我正在创建一个小型收音机应用，您可以在其中添加歌曲到您的收藏夹，并查看以前播放的歌曲的历史记录。我没有使用Angular，因为他们在Slack对我说不需要它。

问题1：http://s31.postimg.org/rg36kmnnf/favo.png当按下该F按钮时，如何将该卡的内容移动到“收藏夹”选项卡？

问题2：如果有两张卡垂直放置StackLayout，而手机转为水平，则较低的卡缩小到屏幕尺寸。我还没有找到如何添加滚动的解决方案。

问题3：如何显示列表，添加内容和＆amp;控制它？所有解决方案都只适用于Angular，我需要非Angular解决方案。只是一个简单的样本，没什么特别的。

问题4：如何从本地获取歌曲信息（目前用于测试）JSON文件？

非常感谢你帮助我。

Answer 1

SO和NativeScript的问候。作为初步建议，您不仅要考虑一堆问题，还要考虑您的方法以及您迄今取得的成就。使用this guide如果您希望获得能真正帮助您完成项目的答案，请遵循指南。现在，让我试着回答你的一些问题。

1。）不确定您是否询问如何直观地移动元素，或者例如，如果您需要创建逻辑以添加项目和favoriteItems数组。我假设第一种情况：您需要将元素从x和y坐标移动到顶角。 Animations

page.js

var view = page.getViewById(""my-f-view"); 
view.animate({
    translate: { x: 100, y: -100},
    duration: 3000
});

当点击该项目时，您可能会触发此动画。

2。）您可以将其包装在ScrollView

中

<Page>
 <ScrollView>
   <StackLayout height="1600">
     // some content
   </StackLayout>
 </ScrollView>
</Page>

3.。要显示数据列表，您可以使用ListView或Repeater。例： page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
  <ListView items="{{ myItems }}" itemTap="listViewItemTap">
      <ListView.itemTemplate>
        <Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" />
      </ListView.itemTemplate>
  </ListView>
</Page>

page.ts（注意这是TypeScript项目示例）

import { EventData, Observable } from "data/observable";
import { ObservableArray } from "data/observable-array";
import { Page } from "ui/page";
import { ItemEventData } from "ui/list-view";

import frameModule = require("ui/frame");

let viewModel = new Observable();
let myItems = new ObservableArray(  {title: "Core Concepts"}, 
                                    {title: "User Interface"}, 
                                    {title: "Plugins"}, 
                                    {title: "Cookbook"}, 
                                    {title: "Tutorials"}  );

export function navigatingTo(args: EventData) {

    var page = <Page>args.object;
    viewModel.set("myItems", myItems);

    // ListView will be updated automatically when new item is pushed.
    myItems.push({title:"Publishing"});

    page.bindingContext = viewModel;
}

export function listViewItemTap(args:ItemEventData) {
    var itemIndex = args.index;

    // example how to navigate details-page & pass the tapped item context
    // frameModule.topmost().navigate({
    //     moduleName: "./details-page",
    //     context: myItems.getItem(itemIndex);
    // });
}

4。）只需导入您的JSON文件并将其解析为您希望在上下文中传递的数据类型。请参阅存在类似讨论的this SO thread

有关创建NS应用的多个问题

1 个答案: