add example

example/card/card.js

@@ -0,0 +1,109 @@
+import weSwiper from '../../src/main'
+
+const option = {
+  touchstart (e) {
+    this.weswiper.touchstart(e)
+  },
+  touchmove (e) {
+    this.weswiper.touchmove(e)
+  },
+  touchend (e) {
+    this.weswiper.touchend(e)
+  },
+  onLoad () {
+    const device = wx.getSystemInfoSync()
+    new weSwiper({
+      animationViewName: 'animationData',
+      slideLength: 3,
+      initialSlide: 0,
+      width: 550 * device.windowWidth / 750,
+      height: 500 * device.windowWidth / 750,
+      /**
+       * 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) {
+
+      },
+      /**
+       *  swiper从一个slide过渡到另一个slide结束时执行
+       */
+      onSlideChangeEnd (weswiper) {
+
+      },
+      /**
+       *  过渡时触发
+       */
+      onTransitionStart (weswiper) {
+
+      },
+      /**
+       *  过渡结束时执行
+       */
+      onTransitionEnd (weswiper) {
+
+      },
+      /**
+       *  手指触碰swiper并且拖动slide时执行
+       */
+      onSlideMove (weswiper) {
+
+      },
+      /**
+       * slide达到过渡条件 且规定了方向 向前（右、下）切换时执行
+       */
+      onSlideNextStart (weswiper) {
+
+      },
+      /**
+       *  slide达到过渡条件 且规定了方向 向前（右、下）切换结束时执行
+       */
+      onSlideNextEnd (weswiper) {
+
+      },
+      /**
+       *  slide达到过渡条件 且规定了方向 向前（左、上）切换时执行
+       */
+      onSlidePrevStart (swiper) {
+
+      },
+      /**
+       *  slide达到过渡条件 且规定了方向 向前（左、上）切换结束时执行
+       */
+      onSlidePrevEnd (weswiper) {
+
+      }
+    })
+  }
+}
+Page(option)

example/card/card.json

@@ -0,0 +1 @@
+{}

example/card/card.wxml

@@ -0,0 +1,11 @@
+<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/card/card.wxss

@@ -0,0 +1,29 @@
+@import "../../dist/weSwiper.wxss";
+
+/*************  个人样式 *************/
+.we-wrapper{
+  width: 100%;
+  height: 100%;
+  padding: 75rpx 0 100rpx 100rpx;
+  box-sizing: border-box;
+}
+.we-slide{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 500rpx;
+  margin: 25rpx;
+  box-sizing: border-box;
+  color: #fff;
+  font-size: 2rem;
+}
+
+.we-slide:nth-child(1){
+  background-color: #4390EE
+}
+.we-slide:nth-child(2){
+  background-color: #CA4040
+}
+.we-slide:nth-child(3){
+  background-color: #FF8604
+}

example/dashboard/dashboard.js

@@ -0,0 +1 @@
+Page({})

example/dashboard/dashboard.json

@@ -0,0 +1 @@
+{}

example/dashboard/dashboard.wxml

@@ -0,0 +1,10 @@
+<view style="width:100%; text-align: center;">
+  <view style="width: 150rpx; height: 150rpx; border-radius: 50%; background-color: green;margin: 50rpx auto;"></view>
+  <text>we-swiper</text>
+</view>
+<view class="lists">
+  <navigator class="list-item" url="../general/general" hover-class="navigator-hover">常规</navigator>
+  <navigator class="list-item" url="../card/card" hover-class="navigator-hover">卡片</navigator>
+  <navigator class="list-item" url="../flip/flip" hover-class="navigator-hover">flip</navigator>
+  <navigator class="list-item" url="../example/navigate/navigate?title=navigate" hover-class="navigator-hover">2D翻转</navigator>
+</view>

example/dashboard/dashboard.wxss

@@ -0,0 +1,33 @@
+Page{
+  background-color: #f8f8f8;
+}
+
+.lists{
+  margin: 25rpx 0;
+  border-top: 1rpx solid #d7d7d7;
+  border-bottom: 1rpx solid #d7d7d7;
+  background-color: #fff;
+}
+
+.list-item{
+  position: relative;
+  width: 100%;
+  height: 100rpx;
+  margin-left: 25rpx;
+  line-height: 100rpx;
+  font-size: 32rpx;
+  border-bottom: 1rpx solid #d7d7d7;
+}
+
+.list-item:after{
+  position: absolute;
+  top: 50%;
+  right: 50rpx;
+  content: '>';
+  transform: translateY(-50%);
+  color: #666;
+}
+
+.list-item:last-child{
+  border: 0;
+}

example/general/general.js

@@ -0,0 +1,107 @@
+import weSwiper from '../../src/main'
+
+const option = {
+  touchstart (e) {
+    this.weswiper.touchstart(e)
+  },
+  touchmove (e) {
+    this.weswiper.touchmove(e)
+  },
+  touchend (e) {
+    this.weswiper.touchend(e)
+  },
+  onLoad () {
+    const device = wx.getSystemInfoSync()
+    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) {
+
+      },
+      /**
+       *  swiper从一个slide过渡到另一个slide结束时执行
+       */
+      onSlideChangeEnd (weswiper) {
+
+      },
+      /**
+       *  过渡时触发
+       */
+      onTransitionStart (weswiper) {
+
+      },
+      /**
+       *  过渡结束时执行
+       */
+      onTransitionEnd (weswiper) {
+
+      },
+      /**
+       *  手指触碰swiper并且拖动slide时执行
+       */
+      onSlideMove (weswiper) {
+
+      },
+      /**
+       * slide达到过渡条件 且规定了方向 向前（右、下）切换时执行
+       */
+      onSlideNextStart (weswiper) {
+
+      },
+      /**
+       *  slide达到过渡条件 且规定了方向 向前（右、下）切换结束时执行
+       */
+      onSlideNextEnd (weswiper) {
+
+      },
+      /**
+       *  slide达到过渡条件 且规定了方向 向前（左、上）切换时执行
+       */
+      onSlidePrevStart (swiper) {
+
+      },
+      /**
+       *  slide达到过渡条件 且规定了方向 向前（左、上）切换结束时执行
+       */
+      onSlidePrevEnd (weswiper) {
+
+      }
+    })
+  }
+}
+Page(option)

example/general/general.json

@@ -0,0 +1 @@
+{}

example/general/general.wxml

@@ -0,0 +1,11 @@
+<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/general/general.wxss

@@ -0,0 +1,20 @@
+@import "../../dist/weSwiper.wxss";
+
+/*************  个人样式 *************/
+.we-slide{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 2rem;
+}
+
+.we-slide:nth-child(1){
+  background-color: #4390EE
+}
+.we-slide:nth-child(2){
+  background-color: #CA4040
+}
+.we-slide:nth-child(3){
+  background-color: #FF8604
+}