本文将带你了解微信小程序开发之触摸内容滑动解决方案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   moduleimport weSwiper from 'dist/weSwiper'commonjsvar weSwiper =   require('dist/weSwiper')示例example.wxml <view class="we-container   {{directionClass}}">
      <view
          bindtouchstart="touchstart"
          bindtouchmove="touchmove"
        bindtouchend="touchend"
          animation="{{animationData}}">
        <view>slide 1</view>
        <view>slide 2</view>
        <view>slide 3</view>
      </view>
    </view>example.jsimport 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结构配置<    

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道！