- Version: 0.1.0
- GitHub: https://github.com/imwalson/nativescript-swiper
- NPM: https://www.npmjs.com/package/nativescript-swiper
- Downloads:
- Last Day: 0
- Last Week: 0
- Last Month: 0
nativescript-swiper
A NativeScript plugin for slide functionality on ios platform,based on ios native UIScrollView,quick response and high availability
Why not android
As you know,slide functionality can made by "viewPager" component in native android devolop.And nativescript "TabView" component in android platform is a combination of a TabLayout widget and a ViewPager widget.So we can use nativescript "TabView" component as a slide by remove the title tab :tabview._tabLayout.setVisibility(android.view.View.GONE);
There is a discuss about this question: TabView without the tabs
Screenshot:
Installation
tns plugin add nativescript-swiper
Usage
xmlns:Swiper="nativescript-swiper"
Example Usage:
XML
<Swiper:SwiperContainer
id="swiper-container"
change="onChanged"
cancell="onCancelled"
start="onStart"
finish="onFinished">
<Swiper:SwiperWrapper id="swiper-wrapper">
<Swiper:SwiperSlide class="bg-blue" height="100%" verticalAlignment="center">
<Label text="Panel 1" color="#fff" textWrap="true" verticalAlignment="center" horizontalAlignment="center" />
</Swiper:SwiperSlide>
<Swiper:SwiperSlide class="bg-green" height="100%" verticalAlignment="center">
<Label text="Panel 2" color="#fff" textWrap="true" verticalAlignment="center" horizontalAlignment="center" />
</Swiper:SwiperSlide>
<Swiper:SwiperSlide class="bg-red" height="100%" verticalAlignment="center">
<Label text="Panel 3" color="#fff" textWrap="true" verticalAlignment="center" horizontalAlignment="center" />
</Swiper:SwiperSlide>
</Swiper:SwiperWrapper>
</Swiper:SwiperContainer>
Methods for SwiperContainer
- nextSlide(animated : boolean) - navigate to the right slide (if animated,transition with animate)
- previousSlide(animated : boolean) - navigate to the left slide (if animated,transition with animate)
- goToSlide(index : number,animated : boolean) : - goes to the slide at the specified index (if animated,transition with animate)
- refresh() - refresh the swiper when slides item changed(added slides,removed slides, or orientation changed),incase the currentIndex and slidesCount calculate Incorrectly.
Attributes for SwiperContainer
- currentIndex : number - get the current index of the slide (read only,start from 0).
Events and EventData
- start - Start pan
- object : The Observable instance that has raised the event.
- eventName : The name of the event.
- currentIndex : The current index of the slide (start from 0).
- slidesCount : The count of all the slides.
- changed - Transition complete
- object : The Observable instance that has raised the event.
- eventName : The name of the event.
- preIndex : The old index of the slide that current slide transition from.
- currentIndex : The current index of the slide (start from 0).
- slidesCount : The count of all the slides.
- cancelled - Transition not complete
- object : The Observable instance that has raised the event.
- eventName : The name of the event.
- currentIndex : The current index of the slide (start from 0).
- slidesCount : The count of all the slides.
- finished - Last slide has come into view
- object : The Observable instance that has raised the event.
- eventName : The name of the event.
- currentIndex : The current index of the slide (start from 0).
- slidesCount : The count of all the slides.
- scroll - the SwiperContainer is scroll (will fire many times)
- object : The Observable instance that has raised the event.
- eventName : The name of the event.
- scrollX : The horizontal offset of the SwiperContainer ScrollView.
- slidesCount : The count of all the slides.
work with Repeater
nativescript-swiper can easily work with Repeater
<Swiper:SwiperContainer >
<Repeater items="{{ items }}">
<Repeater.itemsLayout>
<Swiper:SwiperWrapper />
</Repeater.itemsLayout>
<Repeater.itemTemplate>
<Swiper:SwiperSlide height="100%" verticalAlignment="center">
<Label text="{{ 'Panel in Repeater ' + ($value + 1) }}" color="#000" textWrap="true" verticalAlignment="center" horizontalAlignment="center" />
</Swiper:SwiperSlide>
</Repeater.itemTemplate>
</Repeater>
</Swiper:SwiperContainer>
var Observable = require("data/observable").Observable;
var source = new Observable();
var items = [];
for(var i = 0;i < 10;i++){
items.push(i);
}
source.set("items", items);
page.bindingContext = source;
Add or Remove slides dynamically
Only need to add/remove SwiperSlide item to the SwiperWrapper in any time you want
var platformModule = require("platform");
var swiperWrapper = page.getViewById("swiper-wrapper");
var SwiperSlide = require("nativescript-swiper").SwiperSlide;
var newSwiperSlideItem = new SwiperSlide();
newSwiperSlideItem.height = "100%";
newSwiperSlideItem.backgroundColor = "#000";
newSwiperSlideItem.verticalAlignment = "center";
var LabelModule = require("ui/label");
var label = new LabelModule.Label();
label.text = "this is a new SwiperSlide item,tap to remove it";
label.color = "#fff";
label.verticalAlignment = "center";
label.horizontalAlignment = "center";
newSwiperSlideItem.addChild(label);
swiperWrapper.addChild(newSwiperSlideItem);
label.on('tap',function(args){
swiperWrapper.removeChild(newSwiperSlideItem);
});
Handles application orientation change
when application orientation changed,the slides shold change it's width to fill the screen
add this code into page navigatedTo event
var app = require('application');
var swiperContainer = page.getViewById("swiper-container");
var swiperWrapper = page.getViewById("swiper-wrapper");
app.on(app.orientationChangedEvent, function (args) {
setTimeout(function() {
swiperWrapper.eachLayoutChild(function(slide){
slide.width = platformModule.screen.mainScreen.widthDIPs;
swiperContainer.refresh();
})
}, 10);
})