we swiper
1.0.0
WeChat アプレット タッチ コンテンツ スライド ソリューション、API 設計の詳細、および命名については、swiper.js を参照してください。
cd my-project
git clone https://github.com/dlhandsome/we-swiper.gitdist/weSwiper.jsを導入する 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 >ヒント: WXML のフィールドには、ページのデータのデフォルト値を指定する必要はありません。we-swiper 内には同期ビューのメカニズムがあります。
Number0スライド内のページ数を示します
Numberdevice.windowWidthスライドの幅を設定します（水平にスライドする場合、スライド間の距離はその値に基づいて計算されます）
Numberdevice.windowHeightスライドの高さを設定します（垂直にスライドする場合、スライド間の距離はその値に基づいて計算されます）
Stringhorizontalhorizontal ：水平方向にスライドします。vertical ：スライド 縦にスライドスライドのスライド方向を設定する
Number0初期化中にスライドのインデックスを設定します
Number300スライドのトランジション時間を設定する
Stringeaselinear : スライド 水平方向にスライドease ：縦にスライドスライドease-in ：縦にスライドスライドease-in-out : 縦方向にスライドease-out ：縦にスライドスライドstep-start : スライド スライド 垂直step-end ：スライド 垂直方向にスライドスライドトランジションアニメーションのスピードカーブを設定する
Number0スライドの自動再生間隔を設定します。0に設定すると自動再生されません。
StringdirectionClassビュー内の方向クラス名に対応します
StringanimationDataビュー内のアニメーション属性名に対応します
現在アクティブなブロック (アクティブ化されたブロック) のインデックスを返します。
前のアクティブなブロックのインデックスを返します。
スワイパーコンテナの幅を返します。
スワイパーコンテナの高さを返します。
スワイパーが初期位置にある場合は true を返します
スワイパーが終了位置にある場合は true を返します
現在のスワイパーの遷移時間を返します。
次のスライドにスライドします
runCallbacks : オプション。onSlideChange コールバック関数をトリガーしない場合は false に設定します。speed : オプション、スイッチング速度前のスライドにスライドします。
runCallbacks : オプション。onSlideChange コールバック関数をトリガーしない場合は false に設定します。speed : オプション、スイッチング速度指定したスライドに切り替えます。
index : 必須、数値、切り替え先のスライドのインデックスを指定しますspeed : オプション、スイッチング速度runCallbacks : オプション。onSlideChange コールバック関数をトリガーしない場合は false に設定します。 初期化後に実行されるコールバック関数。 引数としてのオプションの weswiper インスタンス。
スライダーがタッチされたときに実行されるコールバック関数。パラメーターとしてのオプションの weswiper イベントと touchstart イベント
指がウェスワイパーに触れてスライド（指）したときに実行されるコールバック関数。このとき、指の移動方向とウェスワイパーの切り替え方向が直角の場合など、必ずしもスライドが動くとは限りません。
スライダーが放されたときに実行されるコールバック関数。 (リリース時に実行)
weswiper が現在のスライドから別のスライドに遷移するときに実行されるコールバック関数。タッチの場合、スライドを離したときに遷移条件に達しておらず、リバウンド時にこの関数がトリガーされない場合は、この時点で onTransitionStart を使用できます。
weswiper インスタンスをパラメータとして受け取り、出力の activeIndex は遷移後のスライド インデックスです。
Weswiper があるスライドから別のスライドに移行するときに実行されるコールバック関数。
スワイパー インスタンスをパラメータとして受け入れます。
遷移の開始時にトリガーされるコールバック関数は、weswiper インスタンスをパラメーターとして受け入れます。
トランジションの終了時にトリガーされ、パラメータとして weswiper インスタンスを受け取るコールバック関数。
コールバック関数。指がウェスワイパーに触れてスライドをドラッグすると実行されます。
スライダーが放されたときにスライダーが前方 (右、下) に切り替わるようにトリガーされた場合に実行されるコールバック関数。 onSlideChangeStart と似ていますが、方向を指定します。
スライダーが前方 (右、下) に切り替わったときに実行されるコールバック関数。 onSlideChangeEnd と似ていますが、方向を指定します。
スライダーが放されたときにスライダーが後方 (左、上) に切り替わるようにトリガーされた場合に実行されるコールバック関数。 onSlideChangeStart と似ていますが、方向を指定します。
スライダーが後方 (左、上) に切り替わったときに実行されるコールバック関数。 onSlideChangeEnd と似ていますが、方向を指定します。
MIT ライセンス(http://opensource.org/licenses/MIT)
オープンソースを楽しんで参加してください。
良いコメントや提案がありましたら、お気軽に問題またはプルリクエストを送ってください。
