Nativescript 列表视图

Question

我可以在 Layout 中添加 ListView 吗？

我有这个观点：

function pageLoaded(args) {
    var page = args.object;
    var array = new observableArray.ObservableArray();
    array.push({"city":"Madrid","distance":"0.2km","votes":"0"});
    array.push({"city":"Madrid","distance":"0.2km","votes":"0"});
    array.push({"city":"Madrid","distance":"0.2km","votes":"0"});
    array.push({"city":"Madrid","distance":"0.2km","votes":"0"});
    array.push({"city":"Madrid","distance":"0.2km","votes":"0"});
    array.push({"city":"Madrid","distance":"0.2km","votes":"0"});
    page.bindingContext = vmModule.mainViewModel, {"myItems": array};
};

exports.pageLoaded = pageLoaded;

还有这个模板：

<GridLayout>
<TabView>
    <TabView.items>
        <TabViewItem title="Nearest Wifi">
            <TabViewItem.view>
                <GridLayout>
                     <ListView items="{{ myItems }}">
                        <ListView.itemTemplate>
                            <GridLayout columns="*,*" rows="2">
                               <Label col="0" row="0" text="{{ city || 'Downloading...' }}" textWrap="true" class="title" />
                               <Label col="1" row="0" text="{{ distance || 'Downloading...' }}" textWrap="true" class="title" />
                               <Label col="0" row="1" colspan="2" text="Votes: {{nr_votes | 0 }}"/>
                            </GridLayout>
                        </ListView.itemTemplate>
                     </ListView>
                </GridLayout>
            </TabViewItem.view>
        </TabViewItem>

...

我试着让它工作 3 个小时.. 任何帮助都会非常感激。谢谢！

Answer 1

这段代码运行良好，我相信这就是您所追求的：

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">

  <ActionBar title="Cities - WIFI" />

  <TabView>
    <TabView.items>
        <TabViewItem title="Nearest Wifi">
            <TabViewItem.view>
                <ListView items="{{ cities }}">
                    <ListView.itemTemplate>
                        <GridLayout columns="*,*,*" rows="*,*">
                            <Label col="0" row="0" text="City"/>
                            <Label col="1" row="0" text="Distance" />
                            <Label col="2" row="0" text="Votes" />

                            <Label col="0" row="1" text="{{city}}" />
                            <Label col="1" row="1" text="{{distance}}" />
                            <Label col="2" row="1" text="{{votes}}" />
                        </GridLayout>
                    </ListView.itemTemplate>
                </ListView>
            </TabViewItem.view>
        </TabViewItem>
    </TabView.items>
  </TabView>
</Page>

Javascript:

var Observable = require("data/observable").Observable;
var ObservableArray = require("data/observable-array").ObservableArray;

function pageLoaded(args) {
    var page = args.object;
    page.bindingContext = pageData;
}
exports.pageLoaded = pageLoaded;

var pageData = new Observable({
    cities: new ObservableArray([
        {city:"Madrid", distance:"0.2km",votes:"0"},
        {city:"Madrid", distance:"0.2km",votes:"0"},
        {city:"Madrid", distance:"0.2km",votes:"0"}
    ])
})

Answer 2

如果你想迭代数据，这就是方法。您可以将 array.push 行放入 for 循环或任何您想要的地方。

XML:

 <ListView items="{{ cities }}">
                <ListView.itemTemplate>
                    <GridLayout columns="*,*,*" rows="*,*">
                        <Label col="0" row="0" text="City"/>
                        <Label col="1" row="0" text="Distance" />
                        <Label col="2" row="0" text="Votes" />

                        <Label col="0" row="1" text="{{city}}" />
                        <Label col="1" row="1" text="{{distance}}" />
                        <Label col="2" row="1" text="{{votes}}" />
                    </GridLayout>
                </ListView.itemTemplate>
            </ListView>

JS:

var array = new ObservableArray();

array.push({"city":"Madrid","distance":"0.2km","votes":"0"});
array.push({"city":"Madrid","distance":"0.2km","votes":"0"});
array.push({"city":"Madrid","distance":"0.2km","votes":"0"});
array.push({"city":"Madrid","distance":"0.2km","votes":"0"});
array.push({"city":"Madrid","distance":"0.2km","votes":"0"});
array.push({"city":"Madrid","distance":"0.2km","votes":"0"});

var pageData = new Observable({cities: array});

page.bindingContext = pageData;

Nativescript 列表视图

Nativescript ListView

javascript

nativescript