we swiper
1.0.0
Solusi geser konten sentuh applet WeChat, detail desain API, dan penamaan mengacu pada wiper.js.
cd my-project
git clone https://github.com/dlhandsome/we-swiper.gitdist/weSwiper.js ke dalam file proyek untuk pengembangan import weSwiper from 'dist/weSwiper' var weSwiper = require ( 'dist/weSwiper' ) < view class =" we-container {{directionClass}} " >
< view class =" we-wrapper "
bindtouchstart =" touchstart "
bindtouchmove =" touchmove "
bindtouchend =" touchend "
animation =" {{animationData}} " >
< view class =" we-slide " > slide 1 </ view >
< view class =" we-slide " > slide 2 </ view >
< view class =" we-slide " > slide 3 </ view >
</ view >
</ view > import weSwiper from '../dist/weSwiper'
const option = {
touchstart ( e ) {
this . weswiper . touchstart ( e )
} ,
touchmove ( e ) {
this . weswiper . touchmove ( e )
} ,
touchend ( e ) {
this . weswiper . touchend ( e )
} ,
onLoad ( ) {
new weSwiper ( {
animationViewName : 'animationData' ,
slideLength : 3 ,
initialSlide : 0 ,
/**
* swiper初始化后执行
* @param weswiper
*/
onInit ( weswiper ) {
} ,
/**
* 手指碰触slide时执行
* @param weswiper
* @param event
*/
onTouchStart ( weswiper , event ) {
} ,
/**
* 手指碰触slide并且滑动时执行
* @param weswiper
* @param event
*/
onTouchMove ( weswiper , event ) {
} ,
/**
* 手指离开slide时执行
* @param weswiper
* @param event
*/
onTouchEnd ( weswiper , event ) {
} ,
/**
* slide达到过渡条件时执行
*/
onSlideChangeStart ( weswiper ) {
} ,
/**
* weswiper从一个slide过渡到另一个slide结束时执行
*/
onSlideChangeEnd ( weswiper ) {
} ,
/**
* 过渡时触发
*/
onTransitionStart ( weswiper ) {
} ,
/**
* 过渡结束时执行
*/
onTransitionEnd ( weswiper ) {
} ,
/**
* 手指触碰weswiper并且拖动slide时执行
*/
onSlideMove ( weswiper ) {
} ,
/**
* slide达到过渡条件 且规定了方向 向前（右、下）切换时执行
*/
onSlideNextStart ( weswiper ) {
} ,
/**
* slide达到过渡条件 且规定了方向 向前（右、下）切换结束时执行
*/
onSlideNextEnd ( weswiper ) {
} ,
/**
* slide达到过渡条件 且规定了方向 向前（左、上）切换时执行
*/
onSlidePrevStart ( swiper ) {
} ,
/**
* slide达到过渡条件 且规定了方向 向前（左、上）切换结束时执行
*/
onSlidePrevEnd ( weswiper ) {
}
} )
}
}
Page ( option ) onLoad ( ) {
new weSwiper ( {
slideLength : 3 // 必填，由于目前无法直接获取slide页数，目前只能通过参数写入
} )
} touchstart ( e ) {
this . weswiper . touchstart ( e )
} < view class =" we-container {{directionClass}} " >
< view class =" we-wrapper "
bindtouchstart =" touchstart "
bindtouchmove =" touchmove "
bindtouchend =" touchend "
animation =" {{animationData}} " >
< view class =" we-slide " > slide 1 </ view >
< view class =" we-slide " > slide 2 </ view >
< view class =" we-slide " > slide 3 </ view >
</ view >
</ view >Tip: Field di WXML tidak perlu diberi nilai default pada data Halaman. Ada mekanisme tampilan sinkronisasi di dalam we-swiper.
Number0Menunjukkan jumlah halaman dalam slide
Numberdevice.windowWidthMengatur lebar slide (bila menggeser secara horizontal, jarak antar slide akan dihitung berdasarkan nilainya)
Numberdevice.windowHeightMengatur ketinggian perosotan (bila meluncur secara vertikal, jarak antar perosotan akan dihitung berdasarkan nilainya)
Stringhorizontalhorizontal : geser geser secara horizontalvertical : geser geser secara vertikalAtur arah geser slide
Number0Atur indeks slide selama inisialisasi
Number300Atur durasi transisi slide
Stringeaselinear : geser geser secara horizontalease : geser geser secara vertikalease-in : geser geser secara vertikalease-in-out : geser geser secara vertikalease-out : geser geser secara vertikalstep-start : geser geser secara vertikalstep-end : geser geser secara vertikalMengatur kurva kecepatan animasi transisi slide
Number0Atur interval pemutaran otomatis slide. Jika diatur ke 0, slide tidak akan diputar secara otomatis.
StringdirectionClassSesuai dengan nama kelas arah dalam tampilan
StringanimationDataSesuai dengan nama atribut animasi dalam tampilan
Mengembalikan indeks blok yang sedang aktif (blok yang diaktifkan)
Mengembalikan indeks blok aktif sebelumnya
Mengembalikan lebar wadah wiper
Mengembalikan tinggi wadah wiper
Jika penggesek berada di posisi awal, mengembalikan nilai true
Mengembalikan nilai benar jika penggesek berada di posisi akhir
Mengembalikan durasi transisi dari wiper saat ini
Geser ke slide berikutnya
runCallbacks : Opsional, disetel ke false agar tidak memicu fungsi panggilan balik onSlideChangespeed : opsional, kecepatan peralihan Geser ke slide sebelumnya.
runCallbacks : Opsional, disetel ke false agar tidak memicu fungsi panggilan balik onSlideChangespeed : opsional, kecepatan peralihan Beralih ke slide yang ditentukan.
index : diperlukan, num, menentukan indeks slide yang akan dialihkanspeed : opsional, kecepatan peralihanrunCallbacks : Opsional, disetel ke false agar tidak memicu fungsi panggilan balik onSlideChange Fungsi panggilan balik, dijalankan setelah inisialisasi. Contoh weswiper opsional sebagai argumen.
Fungsi panggilan balik, dijalankan ketika penggeser disentuh. Acara weswiper dan touchstart opsional sebagai parameter
Fungsi callback, dijalankan ketika jari menyentuh weswiper dan menggeser (finger). Pada saat ini, slide belum tentu bisa bergerak, misalnya jika arah gerakan jari Anda tegak lurus dengan arah peralihan weswiper.
Fungsi panggilan balik, dijalankan saat penggeser dilepaskan. (Jalankan saat rilis)
Fungsi panggilan balik, dijalankan ketika kita melakukan transisi dari slide saat ini ke slide lain. Dalam kasus sentuhan, jika kondisi transisi tidak tercapai saat slide dilepaskan dan fungsi ini tidak terpicu saat slide memantul, onTransitionStart dapat digunakan saat ini.
Ia menerima instance weswiper sebagai parameter, dan output activeIndex adalah indeks slide setelah transisi.
Fungsi panggilan balik, dijalankan saat weswiper bertransisi dari satu slide ke slide lainnya.
Menerima instance wiper sebagai parameter.
Fungsi panggilan balik, dipicu ketika transisi dimulai, menerima instance weswiper sebagai parameter.
Fungsi panggilan balik, dipicu ketika transisi berakhir, menerima instance weswiper sebagai parameter.
Fungsi callback, dijalankan ketika jari menyentuh weswiper dan menyeret slide.
Fungsi panggilan balik, dijalankan jika penggeser dipicu untuk beralih maju (kanan, bawah) saat penggeser dilepaskan. Mirip dengan onSlideChangeStart, tetapi menentukan arah.
Fungsi panggilan balik, dijalankan ketika penggeser beralih ke depan (kanan, bawah). Mirip dengan onSlideChangeEnd, tetapi menentukan arah.
Fungsi panggilan balik, dijalankan jika penggeser dipicu untuk beralih ke belakang (kiri, atas) saat penggeser dilepaskan. Mirip dengan onSlideChangeStart, tetapi menentukan arah.
Fungsi panggilan balik, dijalankan ketika penggeser beralih ke belakang (kiri, atas). Mirip dengan onSlideChangeEnd, tetapi menentukan arah.
Lisensi MIT(http://opensource.org/licenses/MIT)
Silakan menikmati dan berpartisipasi dalam open source
Jika Anda memiliki komentar atau saran yang bagus, silakan kirimkan saya masalah atau permintaan penarikan.
