我正在学习nativescript。我想在第一个Tab中添加轮播图像。我找到了javascript&网上的xml文件,但我不知道如何使用这些java& xml文件。你能帮帮我吗?
app.component.html:
<TabView #tabView [items]="tabviewitems" (selectedIndexChanged)="tabViewIndexChange(tabView.selectedIndex)" dir="rtl"></TabView>
app.component.ts
import { Component } from "@angular/core";
import { StackLayout } from "ui/layouts/stack-layout";
import { Label } from "ui/label";
import { TabView, SelectedIndexChangedEventData, TabViewItem } from "ui/tab-view";
import { View } from "ui/core/view";
@Component({
moduleId: module.id,
templateUrl: "./app.component.html",
})
export class AppComponent {
public tabviewitems: Array<TabViewItem>;
constructor() {
this.tabviewitems = [];
let innerFirstStackLayout = new StackLayout();
let firstLabel = new Label();
firstLabel.margin = "15";
firstLabel.text = "Label first page";
innerFirstStackLayout.addChild(firstLabel);
let innerSecondStackLayout = new StackLayout();
let secondLabel = new Label();
secondLabel.margin = "15";
secondLabel.text = "Label second page";
innerSecondStackLayout.addChild(secondLabel);
let innerThirdStackLayout = new StackLayout();
let thirdLabel = new Label();
thirdLabel.margin = "15";
thirdLabel.text = "Label third page";
innerThirdStackLayout.addChild(thirdLabel);
this.tabviewitems.push(this.createTabItem("Tab1", innerFirstStackLayout));
this.tabviewitems.push(this.createTabItem("Tab2", innerSecondStackLayout));
this.tabviewitems.push(this.createTabItem("Tab3", innerThirdStackLayout));
}
public tabViewIndexChange(res) {
alert("Tab View selected index: " + res);
}
createTabItem(title: string, view: View): TabViewItem {
const item = new TabViewItem();
item.title = title;
item.view = view;
return item;
}
}
carousel2.xml:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" xmlns:ns="nativescript-carousel">
<Page.actionBar>
<ActionBar title="Dynamic"></ActionBar>
</Page.actionBar>
<ScrollView>
<StackLayout>
<Label text="Define a template and assign the 'items' array." textWrap="true" margin="10,0,0,0"/>
<Label text="Also works well innside a ScrollView." textWrap="true" margin="0,0,20,0" />
<StackLayout height="100" verticalAlignment="center">
<Label text="Some content here..." textWrYou need to specify all --key-store-* options.
* --key-store-alias - Provides the alias for the keystore file specified with --key-store-path. You can use the --key-store-* options along with --release to produce a signed release build. You need to specify all --key-store-* options.
* --key-store-alias-password - Provides the password for the alias specified with --key-store-alias-password. You can use the --key-store-* options along with --release to produce a signed release build. You need to specify all --key-store-* options.
### Attributes
* <Device ID> is the index or Device Identifierap="true"/>
</StackLayout>
<GridLayout height="250">
<ns:Carousel id="myCarousel" height="250" color="white" pageChanged="myChangeEvent" pageTapped="mySelectedEvent" pageScrolling="myScrollingEvent" android:indicatorAnimation="slide"
items="{{ myDataArray }}" indicatorColor="#fff">
<ns:Carousel.itemTemplate>
<ns:CarouselItem verticalAlignment="center" backgroundColor="{{ color }}" height="250">
<GridLayout rows="*" columns="*,*">
<Label text="{{ title }}" horizontalAlignment="center" verticalAlignment="center" col="0"/>
<Image src="{{ image }}" height="100" col="1" />
</GridLayout>
</ns:CarouselItem>
</ns:Carousel.itemTemplate>
</ns:Carousel>
</GridLayout>
<Label text="Indicator animation type: 'slide'" textWrap="true" ios:visibility="collapsed" margin="10,0,0,0"/>
<Button text="Select page 3" tap="selectPageEvent" margin="10,10,0,10"/>
<StackLayout height="400" margin="10,0,0,0">
<Label text="Some content here..." textWrap="true" />
</StackLayout>
</StackLayout>
</ScrollView>
</Page>
carousel2.js
var observableModule = require("data/observable");
var pageData = new observableModule.Observable();
var myDataArray = [
{title:"Slide 1", color: "#b3cde0", image:"https://raw.githubusercontent.com/manijak/nativescript-photoviewer/master/demo/res/01.jpg"},
{title:"Slide 2", color: "#6497b1", image:"https://raw.githubusercontent.com/manijak/nativescript-photoviewer/master/demo/res/02.jpg"},
{title:"Slide 3", color: "#005b96", image:"https://raw.githubusercontent.com/manijak/nativescript-photoviewer/master/demo/res/03.jpg"},
{title:"Slide 4", color: "#03396c", image:"https://raw.githubusercontent.com/manijak/nativescript-photoviewer/master/demo/res/04.jpg"}
/*{title:"Slide 5", color: "#011f4b", image: ""}*/
];
var myCarousel = null;
pageData.set("myDataArray", myDataArray);
function pageLoaded(args) {
var page = args.object;
page.bindingContext = pageData;
myCarousel = page.getViewById("myCarousel");
}
exports.pageLoaded = pageLoaded;
exports.selectPageEvent = function(args){
if(!myCarousel) return;
myCarousel.selectedPage = 2;
}
exports.myScrollingEvent = function(args){
console.log("Scrolling: " + args.state.offset);
}