|
微信小程序觸摸內(nèi)容滑動(dòng)解決方案，API設(shè)計(jì)細(xì)節(jié)及命名參考于swiper.js.為什么要開發(fā)這款插件
官方swiper組件：
-
支持的事件回調(diào)很單一
-
從文檔上看只是能支持橫向滑動(dòng)
-
拓展性不強(qiáng)we-swiper插件:
-
豐富的事件回調(diào)
-
豐富的屬性
-
支持橫、縱向滑動(dòng)
-
強(qiáng)拓展（可在原插件基礎(chǔ)上二次開發(fā)）
-
ScreenShots橫向滾動(dòng)
縱向滾動(dòng)
使用方式
克隆項(xiàng)目至你的目錄
cd my-project
git clone https://github.com/dlhandsome/we-swiper.git
在項(xiàng)目文件引入dist/weSwiper.js進(jìn)行開發(fā)
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初始化后執(zhí)行
* @param swiper
*/
onInit (weswiper) {
},
/**
* 手指碰觸slide時(shí)執(zhí)行
* @param swiper
* @param event
*/
onTouchStart (weswiper, event) {
},
/**
* 手指碰觸slide并且滑動(dòng)時(shí)執(zhí)行
* @param swiper
* @param event
*/
onTouchMove (weswiper, event) {
},
/**
* 手指離開slide時(shí)執(zhí)行
* @param swiper
* @param event
*/
onTouchEnd (weswiper, event) {
},
/**
* slide達(dá)到過渡條件時(shí)執(zhí)行
*/
onSlideChangeStart (weswiper) {
},
/**
* weswiper從一個(gè)slide過渡到另一個(gè)slide結(jié)束時(shí)執(zhí)行
*/
onSlideChangeEnd (weswiper) {
},
/**
* 過渡時(shí)觸發(fā)
*/
onTransitionStart (weswiper) {
},
/**
* 過渡結(jié)束時(shí)執(zhí)行
*/
onTransitionEnd (weswiper) {
},
/**
* 手指觸碰weswiper并且拖動(dòng)slide時(shí)執(zhí)行
*/
onSlideMove (weswiper) {
},
/**
* slide達(dá)到過渡條件 且規(guī)定了方向 向前（右、下）切換時(shí)執(zhí)行
*/
onSlideNextStart (weswiper) {
},
/**
* slide達(dá)到過渡條件 且規(guī)定了方向 向前（右、下）切換結(jié)束時(shí)執(zhí)行
*/
onSlideNextEnd (weswiper) {
},
/**
* slide達(dá)到過渡條件 且規(guī)定了方向 向前（左、上）切換時(shí)執(zhí)行
*/
onSlidePrevStart (swiper) {
},
/**
* slide達(dá)到過渡條件 且規(guī)定了方向 向前（左、上）切換結(jié)束時(shí)執(zhí)行
*/
onSlidePrevEnd (weswiper) {
}
})
}
}
Page(option)
we-swiper初始化
weSwiper在onLoad方法中實(shí)例化
onLoad () {
new weSwiper({
slideLength: 3 // 必填，由于目前無法直接獲取slide頁(yè)數(shù)，目前只能通過參數(shù)寫入
})
}可通過this.weswiper在Page的鉤子函數(shù)中訪問實(shí)例
touchstart (e) {
this.swiper.touchstart(e)
}WXML結(jié)構(gòu)配置
|
