we swiper

we-swiper

微信小程式觸摸內容滑動解決方案，API設計細節及命名參考於swiper.js.

為什麼要開發這款插件

官方swiper組件：

• 支援的事件回調很單一
• 從文檔上看只是能支援橫向滑動(官方swiper元件實際上是支援縱向捲動的，設定屬性vertical="true"即可，但並未在官方文件提及，感謝@pangz1指正)
• 拓展性不強

we-swiper插件:

• 豐富的事件回調
• 豐富的屬性
• 支持橫、縱向滑動
• 強拓展（可在原插件基礎上二次開發）

ScreenShots

橫向捲動

縱向滾動

使用方式

克隆項目至你的目錄

 cd my-project

git clone https://github.com/dlhandsome/we-swiper.git

在專案文件引入dist/weSwiper.js進行開發

es6 module

 import weSwiper from 'dist/weSwiper' 

commonjs

 var weSwiper = require ( 'dist/weSwiper' ) 

範例

example.wxml

 < 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 > 

example.js

 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 ) 

we-swiper初始化

weSwiper在onLoad方法中實例化

 onLoad ( ) {
  new weSwiper ( {
    slideLength : 3  // 必填，由于目前无法直接获取slide页数，目前只能通过参数写入
  } ) 
} 

可透過this.weswiper在Page的鉤子函數中存取實例

 touchstart ( e ) {
  this . weswiper . touchstart ( e )
} 

WXML結構配置

 < 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中的欄位不需要在Page的data中給予預設值，we-swiper內部有同步視圖機制。

構造器參數

必填項

slideLength

• Type: Number
• Default: 0

表示slide的頁數

可選項

width

• Type: Number
• Default: device.windowWidth

設定slide的寬度（橫向滑動時slide滑動間隔距離會根據其值計算）

height

• Type: Number
• Default: device.windowHeight

設定slide的高度（縱向滑動時slide滑動間隔距離會根據其值計算）

direction

• Type: String
• Default: horizontal
• Option:
  • horizontal : slide水平方向滑動
  • vertical : slide垂直方向滑動

設定slide滑動方向

initialSlide

• Type: Number
• Default: 0

設定初始化時slide的索引

speed

• Type: Number
• Default: 300

設定slide過渡時長

timingFunction

• Type: String
• Default: ease
• Option:
  • linear : slide水平方向滑動
  • ease : slide垂直方向滑動
  • ease-in : slide垂直方向滑動
  • ease-in-out : slide垂直方向滑動
  • ease-out : slide垂直方向滑動
  • step-start : slide垂直方向滑動
  • step-end : slide垂直方向滑動

設定slide過渡動畫速度曲線

autoplay

• Type: Number
• Default: 0

設定slide自動播放間隔時長，設定為0時不自動播放

directionViewName

• Type: String
• Default: directionClass

對應視圖中direction類別名

animationViewName

• Type: String
• Default: animationData

對應視圖中animation屬性名

屬性

weswiper.activeIndex

傳回目前活動區塊(激活區塊)的索引

weswiper.previousIndex

傳回上一個活動區塊的索引

weswiper.width

返回swiper容器的寬度

weswiper.height

返回swiper容器的高度

weswiper.isBeginning

如果swiper處於最初始位置，則回傳true

weswiper.isEnd

如果swiper處於最末端位置，則回傳true

weswiper.speed

返回當前swiper的過渡時長

方法

weswiper.slideNext(runCallbacks, speed)

滑動到後一個slide

• Params:
  • runCallbacks : 可選，設為false不觸發onSlideChange回呼函數
  • speed : 可選，切換速度

weswiper.slidePrev(runCallbacks, speed)

滑動到前一個slide。

• Params:
  • runCallbacks : 可選，設為false不觸發onSlideChange回呼函數
  • speed : 可選，切換速度

weswiper.slideTo(index, speed, runCallbacks)

切換到指定slide。

• Params:
  • index : 必選，num，指定將要切換到的slide的索引
  • speed : 可選，切換速度
  • runCallbacks : 可選，設為false不觸發onSlideChange回呼函數

事件回調

onInit (weswiper)

回調函數，初始化後執行。 可選weswiper實例作為參數。

onTouchStart (weswiper, event)

回調函數，當碰觸到slider時執行。可選weswiper和touchstart事件作為參數

onTouchMove (weswiper, event)

回調函數，手指觸碰weswiper並滑動（手指）時執行。此時slide不一定會發生移動，例如你手指的移動方向和weswiper的切換方向垂直時

onTouchEnd (weswiper, event)

回調函數，當釋放slider時執行。 （釋放即執行）

onSlideChangeStart (weswiper)

回調函數，weswiper從目前slide開始過渡到另一個slide時執行。觸碰情況下，如果釋放slide時沒有達到過渡條件而回彈時不會觸發這個函數，此時可用onTransitionStart。

可接受weswiper實例作為參數，輸出的activeIndex是過渡後的slide索引

onSlideChangeEnd (weswiper)

回調函數，weswiper從一個slide過渡到另一個slide結束時執行。

可接受swiper實例作為參數。

onTransitionStart (weswiper)

回調函數，過渡開始時觸發，接受weswiper實例作為參數。

onTransitionEnd (weswiper)

回調函數，過渡結束時觸發，接收weswiper實例作為參數。

onSlideMove (weswiper)

回調函數，手指觸碰weswiper並拖曳slide時執行。

onSlideNextStart (weswiper)

回呼函數，滑桿釋放時如果觸發slider向前(右、下)切換則執行。類似於onSlideChangeStart，但規定了方向。

onSlideNextEnd (weswiper)

回呼函數，slider向前(右、下)切換結束時執行。類似於onSlideChangeEnd，但規定了方向。

onSlidePrevStart (weswiper)

回呼函數，滑桿釋放時如果觸發slider向後(左、上)切換則執行。類似於onSlideChangeStart，但規定了方向。

onSlidePrevEnd (weswiper)

回呼函數，slider在向後(左、上)切換結束時執行。類似於onSlideChangeEnd，但規定了方向。

TODO

• 增加切換效果：fade，flip等

License

The MIT License(http://opensource.org/licenses/MIT)

請自由地享受並參與開源

貢獻

如果你有好的意見或建議，歡迎給我提issue或pull request。