微信小程序触摸内容滑动解决方案we-swiper

微信小程序触摸内容滑动解决方案，API设计细节及命名参考于swiper.js.为什么要开发这款插件

官方swiper组件：

• 支持的事件回调很单一
• 从文档上看只是能支持横向滑动
• 拓展性不强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 swiper
       */
      onInit (weswiper) {

      },
      /**
       * 手指碰触slide时执行
       * @param swiper
       * @param event
       */
      onTouchStart (weswiper, event) {

      },
      /**
       * 手指碰触slide并且滑动时执行
       * @param swiper
       * @param event
       */
      onTouchMove (weswiper, event) {

      },
      /**
       * 手指离开slide时执行
       * @param swiper
       * @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.swiper.touchstart(e)
}WXML结构配置

<