[英]Nativescript ListView
Can i add a ListView inside a Layout ? 我可以在布局内添加ListView吗?
I have this View: 我有这个观点:
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;
And this template: 和这个模板:
<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>
... ...
I try to make it work for 3 hours .. any help would be apreciated. 我试图使其工作3个小时..任何帮助将不胜感激。 Thanks!
谢谢!
This code works well, I believe it's what you're after: 该代码运行良好,我相信这是您的追求:
<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: 使用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"}
])
})
This is the way if you want to iterate the data. 如果要迭代数据,这就是这种方式。 You can put array.push lines into for loop or wherever you want.
您可以将array.push行放入for循环或任何您想要的地方。
XML: 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: 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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.