swipe

components.json

@@ -30,5 +30,7 @@
   "row": "./packages/row/index.js",
   "actionsheet": "./packages/actionsheet/index.js",
   "quantity": "./packages/quantity/index.js",
-  "progress": "./packages/progress/index.js"
+  "progress": "./packages/progress/index.js",
+  "swipe": "./packages/swipe/index.js",
+  "swipe-item": "./packages/swipe-item/index.js"
 }

docs/examples-dist/field.vue

@@ -10,6 +10,11 @@
   <zan-field type="text" placeholder="请输入用户名"></zan-field>
 </zan-cell-group>
 
+              </example-block><example-block title="带border的输入框">
+                <div class="zan-field-wrapper">
+  <zan-field type="text" placeholder="请输入用户名" border=""></zan-field>
+</div>
+
               </example-block><example-block title="禁用的输入框">
                 <zan-cell-group>
   <zan-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></zan-field>
@@ -21,7 +26,15 @@
 </zan-cell-group>
 
               </example-block></section></template>
-
+<style>
+@component-namespace demo {
+  @b field {
+    .zan-field-wrapper {
+      padding: 0 10px;
+    }
+  }
+}
+</style>
 <script>
 import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
 export default {

docs/examples-dist/swipe.vue

@@ -0,0 +1,22 @@
+<template><section class="demo-swipe"><h1 class="demo-title">swipe</h1><example-block title="">
+                <zan-swipe>
+  <zan-swipe-item>
+    <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
+  </zan-swipe-item>
+  <zan-swipe-item>
+    <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
+  </zan-swipe-item>
+</zan-swipe>
+
+              </example-block></section></template>
+<style>
+@component-namespace demo {
+  @b swipe {
+    .zan-swipe {
+      height: 200px;
+    }
+  }
+}
+</style>
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>

docs/examples-docs/swipe.md

@@ -0,0 +1,26 @@
+<style>
+@component-namespace demo {
+  @b swipe {
+    .zan-swipe {
+      height: 200px;
+    }
+  }
+}
+</style>
+
+## Swipe
+
+### 基础用法
+
+:::demo 基础用法
+```html
+<zan-swipe>
+  <zan-swipe-item>
+    <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
+  </zan-swipe-item>
+  <zan-swipe-item>
+    <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
+  </zan-swipe-item>
+</zan-swipe>
+```
+:::

packages/radio/src/radio.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    @click="handleRadioClick"
     class="zan-radio"
     :class="{
       'zan-radio--disabled': isDisabled
@@ -69,6 +70,10 @@ export default {
         return;
       }
       this.currentValue = this.name;
+    },
+
+    handleRadioClick() {
+      this.$emit('click');
     }
   }
 };

packages/swipe-item/index.js

@@ -0,0 +1,3 @@
+import SwipeItem from 'packages/swipe/src/swipe-item';
+
+export default SwipeItem;

packages/swipe/CHANGELOG.md

@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版

packages/swipe/README.md

@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)

packages/swipe/index.js

@@ -0,0 +1,3 @@
+import Swipe from './src/swipe';
+
+export default Swipe;

packages/swipe/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/swipe/src/input.js

@@ -0,0 +1,116 @@
+import { EventEmitter, extend, bindEvents, removeEvents } from './utils';
+
+function Input(host, options) {
+  EventEmitter.apply(this, arguments);
+
+  this.isStarting = false;
+  this.startPt = null;
+  this.endPt = null;
+  this.isDeaf = false;
+
+  this.options = extend({
+    listenMoving: false
+  }, options);
+
+  this.host = host;
+  this.onTouchStart = this.onTouchStart.bind(this);
+  this.onTouchMove = this.onTouchMove.bind(this);
+  this.onTouchEnd = this.onTouchEnd.bind(this);
+
+  this.bind(this.host);
+}
+
+Input.prototype = Object.create(new EventEmitter());
+
+extend(Input.prototype, {
+  bind: function(host) {
+
+    bindEvents(host, 'touchstart mousedown', this.onTouchStart);
+    if (this.options.listenMoving) {
+      bindEvents(window, 'touchmove mousemove', this.onTouchMove);
+    }
+    bindEvents(window, 'touchend mouseup touchcancel', this.onTouchEnd);
+  },
+
+  onTouchStart: function(e) {
+    if (this.isDeaf || this.isStarting) {
+      return;
+    }
+    this.isStarting = true;
+    this.orgDirection = null;
+    this.startPt = this.pointerEventToXY(e);
+  },
+
+  onTouchMove: function(e) {
+    if (!this.isStarting) {
+      return;
+    }
+    this.caculate(e);
+  },
+
+  onTouchEnd: function(e) {
+    if (!this.isStarting) {
+      return;
+    }
+    this.isStarting = false;
+    this.caculate(e, true);
+  },
+
+  caculate: function(e, isEnd) {
+    var distY, distX;
+    this.endPt = this.pointerEventToXY(e);
+
+    distY = this.startPt.y - this.endPt.y;
+    distX = this.startPt.x - this.endPt.x;
+
+    if (distY) {
+      this.emit(distY > 0 ? 'up' : 'down', distY, isEnd, e);
+    }
+    if (distX) {
+      this.emit(distX > 0 ? 'left' : 'right', distX, isEnd, e);
+    }
+
+    if (this.orgDirection == null) {
+      this.orgDirection = Math.abs(distX) > Math.abs(distY);
+    }
+
+    this.emit('move', {x: distX, y: distY}, isEnd, e, {orgDirection: this.orgDirection});
+  },
+
+  pointerEventToXY: function(e) {
+    var out = {x: 0, y: 0};
+    var type = e.type;
+    if (e.originalEvent) {
+      e = e.originalEvent;
+    }
+    if (['touchstart', 'touchmove', 'touchend', 'touchcancel'].indexOf(type) > -1) {
+      var touch = e.touches[0] || e.changedTouches[0];
+      out.x = touch.pageX;
+      out.y = touch.pageY;
+    } else if (
+      ['mousedown', 'mouseup', 'mousemove', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave'].indexOf(type) > -1
+    ) {
+      out.x = e.pageX;
+      out.y = e.pageY;
+    }
+    return out;
+  },
+
+  deaf: function() {
+    this.isDeaf = true;
+  },
+
+  undeaf: function() {
+    this.isDeaf = false;
+  },
+
+  destroy: function() {
+    removeEvents(this.host, 'touchstart mousedown', this.onTouchStart);
+    if (this.options.listenMoving) {
+      removeEvents(window, 'touchmove mousemove', this.onTouchMove);
+    }
+    removeEvents(window, 'touchend mouseup touchcancel', this.onTouchEnd);
+  }
+});
+
+export default Input;

packages/swipe/src/scroll.js

@@ -0,0 +1,147 @@
+import { EventEmitter, extend } from './utils'
+
+const setElementsStyles = (elems, styles) => {
+  Array.prototype.forEach.call(elems, item => {
+    extend(item.style, styles)
+  })
+}
+
+function Scroll(wrapElem, options) {
+  EventEmitter.apply(this, arguments);
+  this.wrapElem = wrapElem;
+  this.wrapSize = {
+    width: () => wrapElem.clientWidth,
+    height: () => wrapElem.clientHeight
+  };
+
+  this.options = extend({
+    loop: true,
+    autoPlay: false,
+    startIndex: 0
+  }, options);
+  this.init.apply(this, arguments);
+}
+
+Scroll.prototype = Object.create(new EventEmitter());
+extend(Scroll.prototype, {
+  init: function() {
+    this.update();
+  },
+
+  getCurrentDist: function() {
+    return this.mCache.currentDist;
+  },
+
+  update: function() {
+    const oldPages = this.pages
+    this.pages = this.wrapElem.querySelectorAll('.swp-page');
+    if (oldPages && oldPages.length === this.pages.length) {
+      const isSame = Array.prototype.every.call(this.pages, (elem, index) => {
+        return this.pages[index] === oldPages[index]
+      })
+      if (isSame) {
+        return
+      }
+    }
+    var defaultStyle = {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      display: 'block',
+      '-webkit-transform': 'translate3d(-9999px, 0, 0)'
+    };
+    setElementsStyles(this.pages, defaultStyle);
+    this.mCache = {
+      dist: 0,
+      offsetPage: 0
+    };
+
+    this.setCurrentPage(0);
+    this.movePage(this.options.startIndex * this.wrapSize.width(), true);
+  },
+
+  renderPage: function(dist = 0, currentOffsetPage = 0) {
+    var wrapWidth = this.wrapSize.width();
+    var offset = currentOffsetPage * wrapWidth - dist;
+    var page;
+    var leftPage;
+    var rightPage;
+    var leftOffset = offset - wrapWidth;
+    var rightOffset = offset + wrapWidth;
+
+    page = this.getCurrentPage();
+    if (page) {
+      page.style['-webkit-transform'] = 'translate3d(' + offset + 'px, 0, 0)';
+    }
+
+    leftPage = this.pages[this.mapLoopPage(currentOffsetPage - 1)];
+    if (leftPage) {
+      if (Math.abs(leftOffset) <= wrapWidth) {
+        leftPage.style['-webkit-transform'] = 'translate3d(' + leftOffset + 'px, 0, 0)';
+      } else {
+        if (this.pages.length > 2) {
+          leftPage.style['-webkit-transform'] = 'translate3d(-9999px, 0, 0)';
+        }
+      }
+    }
+
+    rightPage = this.pages[this.mapLoopPage(currentOffsetPage + 1)];
+    if (rightPage) {
+      if (Math.abs(rightOffset) <= wrapWidth) {
+        rightPage.style['-webkit-transform'] = 'translate3d(' + rightOffset + 'px, 0, 0)';
+      } else {
+        if (this.pages.length > 2) {
+          rightPage.style['-webkit-transform'] = 'translate3d(-9999px, 0, 0)';
+        }
+      }
+    }
+  },
+
+  movePage: function(dist, isEnd) {
+    var currentOffsetPage;
+
+    this.mCache.currentDist = dist + this.mCache.dist;
+    if (isEnd) {
+      this.mCache.dist += dist;
+    }
+
+    currentOffsetPage = Math.round(this.mCache.currentDist / this.wrapSize.width()) || 0;
+
+    if (currentOffsetPage !== this.mCache.offsetPage) {
+      this.setCurrentPage(currentOffsetPage);
+
+      // 翻页
+      this.emit('pageChangeEnd', this.getCurrentPage()
+        , this.currentIndex, this.mCache.offsetPage);
+      this.mCache.offsetPage = currentOffsetPage;
+    }
+
+    this.renderPage(this.mCache.currentDist, currentOffsetPage);
+  },
+
+  getCurrentPage: function() {
+    return this.pages[this.currentIndex];
+  },
+
+  mapLoopPage: function(num) {
+    if (this.options.loop) {
+      var direction = num < 0 ? -1 : 1;
+      var l = this.pages.length;
+      return Math.abs(l + direction * Math.abs(num) % l) % l;
+    } else {
+      if (num >= this.pages.length || num < 0) {
+        return this.pages.length;
+      } else {
+        return num;
+      }
+    }
+  },
+
+  setCurrentPage: function(num) {
+    this.currentIndex = this.mapLoopPage(num);
+  }
+});
+
+export default Scroll;

packages/swipe/src/spring_dummy.js

@@ -0,0 +1,147 @@
+import { requestAnimationFrame, cancelAnimationFrame, EventEmitter, extend } from './utils'
+
+function SpringDummy(scroll, input, options) {
+  var wrapElem = scroll.wrapElem;
+  var self = this;
+  EventEmitter.apply(this, arguments);
+
+  this.scroll = scroll;
+  this.input = input;
+  this.input.on('move', this.movementReact.bind(this));
+  this.wrapSize = {
+    width: () => wrapElem.clientWidth,
+    height: () => wrapElem.clientHieght
+  };
+
+  this.options = extend({
+    intervalTween: 3000,
+    threshold: 20
+  }, options);
+
+  if (this.scroll.options.autoPlay) {
+    this.initMove();
+  }
+
+  this.on('bounceEnd', function() {
+    if (self.scroll.options.autoPlay) {
+      self.initMove();
+    }
+
+    self.input.undeaf();
+  }).on('bounceStart', function() {
+    self.input.deaf();
+  });
+
+}
+
+SpringDummy.prototype = Object.create(new EventEmitter());
+extend(SpringDummy.prototype, {
+
+  clearTransition: function() {
+    cancelAnimationFrame(this.transitionReq);
+  },
+
+  movementReact: function(pt, isEnd, e, extra) {
+    if (isEnd) {
+      this.launch(extra.orgDirection ? pt.x : 0);
+    }
+    this.clearMove();
+  },
+
+  launch: function(dist) {
+    var self = this;
+    var direction = dist / Math.abs(dist);
+    var addition = 0;
+    var w = self.wrapSize.width();
+    var tempOffsetPage = Math.round(dist / w);
+    var offsetPage = this.scroll.mCache.offsetPage;
+
+    // 翻到对应页
+    addition = w * tempOffsetPage;
+
+    // addition为0是原位置
+    if (addition === 0) {
+      if (Math.abs(dist) > self.options.threshold) {
+        // 翻到下一页
+        addition = w * direction;
+      }
+    }
+
+    if (!self.scroll.options.loop) {
+      if (offsetPage <= 0) {
+        if (Math.abs(dist) > self.options.threshold && direction > 0) {
+          addition = w * direction;
+        } else {
+          addition = w * (tempOffsetPage - offsetPage);
+        }
+      }
+
+      if (this.scroll.pages.length === 1) {
+        addition = 0;
+      } else if (offsetPage >= this.scroll.pages.length - 1) {
+        if (Math.abs(dist) > self.options.threshold && direction < 0) {
+          addition = w * direction;
+        } else {
+          addition = w * (tempOffsetPage - offsetPage + this.scroll.pages.length - 1);
+        }
+      }
+
+    }
+
+    this.initTween(addition - dist, 150, 'bounce');
+  },
+
+  initTween: function(dist, duration, eventName) {
+    if (dist === 0) {
+      return;
+    }
+    var elapse;
+    var self = this;
+    var startTime = new Date();
+
+    this.cancelTween();
+    this.emit(eventName + 'Start');
+
+    function round() {
+      elapse = new Date() - startTime;
+      if (elapse > duration) {
+        self.emit(eventName, {x: dist}, true);
+        self.emit(eventName + 'End');
+        return;
+      }
+
+      self.emit(eventName, {x: dist / duration * elapse}, false);
+      self.tweenRid = requestAnimationFrame(round);
+    }
+    round();
+  },
+
+  cancelTween: function() {
+    cancelAnimationFrame(this.tweenRid);
+  },
+
+  initMove: function() {
+    var self = this;
+    var scroll = this.scroll;
+    var intervalTween = self.options.intervalTween;
+
+    this.clearMove();
+
+    function round() {
+      if ((scroll.currentIndex === scroll.pages.length - 1) && !scroll.options.loop) {
+        self.initTween(-self.wrapSize.width() * (scroll.pages.length - 1), 200, 'autoPlay');
+      } else {
+        self.initTween(self.wrapSize.width(), 200, 'autoPlay');
+      }
+      self.moveTid = setTimeout(round, intervalTween);
+    }
+    self.moveTid = setTimeout(round, intervalTween);
+  },
+
+  clearMove: function() {
+    clearTimeout(this.moveTid);
+  }
+});
+
+export default SpringDummy;
+

packages/swipe/src/swipe-item.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="zan-swipe-item">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'zan-swipe-item'
+};
+</script>

packages/swipe/src/swipe.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="zan-swipe">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import Input from './input';
+import Scroll from './scroll';
+import SpringDummy from './spring_dummy';
+
+export default {
+  name: 'zan-swipe',
+
+  props: {
+    autoPlay: {
+      type: Boolean,
+      default: false
+    },
+    onPageChangeEnd: {
+      type: Function,
+      default: () => {}
+    }
+  },
+
+  mounted() {
+    this.input = new Input(this.$el, {
+      listenMoving: true
+    });
+
+    this.input.on('move', function(dist, isEnd, e, extra) {
+      if (extra.orgDirection) {
+        e.preventDefault();
+        scroll.movePage(dist.x, isEnd);
+      }
+    });
+
+    this.scroll = new Scroll(this.$el, {
+      autoPlay: this.autoPlay
+    });
+
+    const scroll = this.scroll;
+    scroll.on('pageChangeEnd', this.onPageChangeEnd);
+
+    const dummy = new SpringDummy(scroll, this.input);
+
+    dummy.on('bounce', function(dist, isEnd) {
+      scroll.movePage(dist.x, isEnd);
+    }).on('autoPlay', function(dist, isEnd) {
+      scroll.movePage(dist.x, isEnd);
+    });
+  },
+
+  updated() {
+    this.scroll.update();
+  }
+};
+</script>

packages/swipe/src/utils.js

@@ -0,0 +1,70 @@
+'use strict';
+
+var extend = Object.assign.bind(Object);
+
+function EventEmitter() {
+  this.__events = {};
+}
+EventEmitter.prototype = {
+  on: function(name, cb) {
+    this.__events[name] || (this.__events[name] = []);
+    this.__events[name].push(cb);
+    return this;
+  },
+  emit: function(name) {
+    var arr = this.__events[name];
+    var argus = Array.prototype.slice.call(arguments, 1);
+    var self = this;
+    if (arr) {
+      arr.forEach(function(cb) {
+        cb.apply(self, argus);
+      })
+    }
+  },
+  removeListener: function(name, fn) {
+    if (this.__events[name] == undefined) {
+      return;
+    }
+    let index;
+    if (fn) {
+      index = this.__events[name].indexOf(fn);
+      if (index > 0) {
+        this.__events[name].splice(index, 1);
+      }
+    } else {
+      delete this.__events[name];
+    }
+  }
+};
+
+const requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
+              function(callback, element) {
+                return window.setTimeout(callback, 1000 / 60);
+              };
+
+const cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame ||
+              window.webkitCancelAnimationFrame || window.msRequestAnimationFrame ||
+              function(id) {
+                clearTimeout(id);
+              };
+
+const bindEvents = (elem, eventNames, fn) => {
+  eventNames = eventNames.split(/\s+/)
+  eventNames.forEach(eventName => elem.addEventListener(eventName, fn))
+}
+
+const removeEvents = (elem, eventNames, fn) => {
+  eventNames = eventNames.split(/\s+/)
+  eventNames.forEach(eventName => elem.removeEventListener(eventName, fn))
+}
+
+export {
+  extend,
+  EventEmitter,
+  requestAnimationFrame,
+  cancelAnimationFrame,
+  bindEvents,
+  removeEvents
+};
+

packages/zanui-css/src/index.css

@@ -25,3 +25,4 @@
 @import './actionsheet.css';
 @import './quantity.css';
 @import './progress.css';
+@import './swipe.css';

packages/zanui-css/src/swipe.css

@@ -0,0 +1,24 @@
+@component-namespace zan {
+    @b swipe {
+        position: relative;
+        overflow: hidden;
+        width: 100%;
+    }
+
+    @b swipe-item {
+        display: none;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        text-align: center;
+
+        img {
+            max-width: 100%;
+            max-height: 100%;
+        }
+
+        &:first-child {
+            display: block;
+        }
+    }
+}

src/index.js

@@ -30,6 +30,8 @@ import Row from '../packages/row/index.js';
 import Actionsheet from '../packages/actionsheet/index.js';
 import Quantity from '../packages/quantity/index.js';
 import Progress from '../packages/progress/index.js';
+import Swipe from '../packages/swipe/index.js';
+import SwipeItem from '../packages/swipe-item/index.js';
 
 const install = function(Vue) {
   if (install.installed) return;
@@ -62,6 +64,8 @@ const install = function(Vue) {
   Vue.component(Actionsheet.name, Actionsheet);
   Vue.component(Quantity.name, Quantity);
   Vue.component(Progress.name, Progress);
+  Vue.component(Swipe.name, Swipe);
+  Vue.component(SwipeItem.name, SwipeItem);
 };
 
 // auto install
@@ -103,5 +107,7 @@ module.exports = {
   Row,
   Actionsheet,
   Quantity,
-  Progress
+  Progress,
+  Swipe,
+  SwipeItem
 };