add swiper

src/components/swiper/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="slider">
+    <div class="swiper" style="height: 180px;">
+      <div class="item" v-for="item in list">
+        <a :href="item.url">
+          <div class="img" :data-x="item.img" :style="{backgroundImage:'url('+item.img+')'}"></div>
+          <p class="desc">{{item.title}}</p>
+        </a>
+      </div>
+    </div>
+    <div class="indicator">
+      <a href="javascript:;" v-for="(index,item) in list">
+        <i class="icon_dot" :class="{'active':index===0}"></i>
+      </a> 
+    </div>
+  </div>
+</template>
+
+<script>
+  import Swiper from './swiper'
+  export default {
+    ready(){
+      const container = this.$el
+      // 自执行
+      const indicator = document.querySelector('.indicator');
+      const dots = indicator.querySelectorAll('.icon_dot');
+      const swiper = new Swiper({container: this.$el, direction: 'horizontal'});
+      swiper.on('swiped', function (prev, current) {
+          // do something
+          Array.prototype.forEach.call(dots, function (dot, index) {
+              if(index === current){
+                  return dot.classList.add('active');
+              }
+              return dot.classList.remove('active');
+          });
+      });
+    },
+    props: {
+      list: {
+        type: Array,
+        required: true
+      }
+    }
+  }
+
+
+</script>
+
+<style type="text/css">
+  .slider{overflow:hidden;position:relative}
+  .swiper{height:180px;overflow:hidden;position:relative}
+  .swiper .item{float:left;position:relative;}
+  .swiper .item a{display:block}
+  .swiper .item .img{display:block;width:100%;height:180px;background:center center no-repeat;background-size:cover;}
+  .swiper .item .desc{position:absolute;left:0;right:0;bottom:0;height:1.4em;font-size:16px;padding:20px 50px 12px 13px;background-image:-webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.7) 100%);background-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.7) 100%);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.5);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}
+  .indicator{position:absolute;right:15px;bottom:10px}
+  .indicator a{float:left;margin-left:6px}
+  .icon_dot{display:inline-block;vertical-align:middle;width:6px;height:6px;border-radius:3px;background-color:#d0cdd1}
+  .icon_dot.active{background-color:#6a666f}
+</style>

src/components/swiper/swiper.js

@@ -0,0 +1,154 @@
+function Swiper (options) {
+  this.version = '1.0.1'
+  this._default = {
+    container: '.swiper',
+    item: '.item',
+    direction: 'vertical',
+    threshold: 50,
+    duration: 300
+  }
+  this._options = extend(this._default, options)
+  this._start = {}
+  this._move = {}
+  this._end = {}
+  this._prev = 0
+  this._current = 0
+  this._offset = 0
+  this._eventHandlers = {}
+
+  this.$container = this._options.container.querySelector('.swiper')
+  this.$items = this.$container.querySelectorAll(this._options.item)
+  this.count = this.$items.length
+
+  this._width = this.$container.offsetWidth
+  this._height = this.$container.offsetHeight
+
+  this._init()
+  this._bind()
+}
+
+Swiper.prototype._init = function () {
+
+  var width = this._width
+  var height = this._height
+
+  var w = width
+  var h = height * this.count
+
+  if (this._options.direction === 'horizontal') {
+    w = width * this.count
+    h = height
+  }
+
+  this.$container.style.width = w + 'px'
+  this.$container.style.height = h + 'px'
+
+  Array.prototype.forEach.call(this.$items, function ($item) {
+    $item.style.width = width + 'px'
+    $item.style.height = height + 'px'
+  })
+}
+
+Swiper.prototype._bind = function () {
+  var me = this
+
+  this.$container.addEventListener('touchstart', function (e) {
+    me._start.x = e.changedTouches[0].pageX
+    me._start.y = e.changedTouches[0].pageY
+  }, false)
+
+  this.$container.addEventListener('touchmove', function (e) {
+    me._move.x = e.changedTouches[0].pageX
+    me._move.y = e.changedTouches[0].pageY
+
+    var distance = me._move.y - me._start.y
+    var transform = 'translate3d(0, ' + (distance - me._offset) + 'px, 0)'
+
+    if (me._options.direction === 'horizontal') {
+      distance = me._move.x - me._start.x
+      transform = 'translate3d(' + (distance - me._offset) + 'px, 0, 0)'
+    }
+
+    me.$container.style['-webkit-transition'] = '0'
+    me.$container.style.transition = '0'
+    me.$container.style['-webkit-transform'] = transform
+    me.$container.style.transform = transform
+
+    e.preventDefault()
+  }, false)
+
+  this.$container.addEventListener('touchend', function (e) {
+    me._end.x = e.changedTouches[0].pageX
+    me._end.y = e.changedTouches[0].pageY
+    var distance = me._end.y - me._start.y
+    if (me._options.direction === 'horizontal') {
+      distance = me._end.x - me._start.x
+    }
+
+    me._prev = me._current
+    if (distance > me._options.threshold) {
+      me._current = me._current === 0 ? 0 : --me._current
+    } else if (distance < -me._options.threshold) {
+      me._current = me._current < (me.count - 1) ? ++me._current : me._current
+    }
+
+    me._show(me._current)
+  }, false)
+
+  this.$container.addEventListener('transitionEnd', function (e) {
+  }, false)
+
+  this.$container.addEventListener('webkitTransitionEnd', function (e) {
+    if (e.target !== me.$container) {
+      return false
+    }
+
+    if (me._current !== me._prev) {
+      var cb = me._eventHandlers.swiped
+      if (cb) {
+        cb.apply(me, [me._prev, me._current])
+      }
+    }
+
+    e.preventDefault()
+  }, false)
+}
+
+Swiper.prototype._show = function (index) {
+  this._offset = index * this._height
+  var transform = 'translate3d(0, -' + this._offset + 'px, 0)'
+
+  if (this._options.direction === 'horizontal') {
+    this._offset = index * this._width
+    transform = 'translate3d(-' + this._offset + 'px, 0, 0)'
+  }
+
+  var duration = this._options.duration + 'ms'
+
+  this.$container.style['-webkit-transition'] = duration
+  this.$container.style.transition = duration
+  this.$container.style['-webkit-transform'] = transform
+  this.$container.style.transform = transform
+}
+
+Swiper.prototype.on = function (event, callback) {
+  if (this._eventHandlers[event]) {
+    console.error('event ' + event + ' is already register')
+  }
+  if (typeof callback !== 'function') {
+    console.error('parameter callback must be a function')
+  }
+
+  this._eventHandlers[event] = callback
+
+  return this
+}
+
+function extend (target, source) {
+  for (var key in source) {
+    target[key] = source[key]
+  }
+  return target
+}
+
+export default Swiper

src/demos/Swiper.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <swiper :list="list"></swiper>
+  <div>
+</template>
+
+<script>
+  import Swiper from '../components/Swiper/'
+  export default {
+    components: {
+      Swiper
+    },
+    data: function(){
+      return {
+        list:  [{
+        url:'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&amp;mid=400385458&amp;idx=1&amp;sn=78f6b8d99715384bdcc7746596d88359&amp;scene=19#wechat_redirect',
+        img:'http://7xqzw4.com2.z0.glb.qiniucdn.com/1.jpg',
+        title:'如何手制一份秋意的茶？'
+      },{
+        url:'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&amp;mid=400160890&amp;idx=1&amp;sn=29ef02af25793a11a3f6aec92bfb46c1&amp;scene=19#wechat_redirect',
+        img:'http://7xqzw4.com2.z0.glb.qiniucdn.com/2.jpg',
+        title:'茶包VS原叶茶'
+      },{
+        url:'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&amp;mid=400094682&amp;idx=1&amp;sn=8231a2053b772b2108784fccc254d28c&amp;scene=19#wechat_redirect',
+        img:'http://7xqzw4.com2.z0.glb.qiniucdn.com/3.jpg',
+        title:'播下茶籽，明春可发芽？'
+      }]
+      }
+    }
+ }
+</script>

test/swiper.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title></title>
+  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
+  <style>
+  * {
+    margin:0;
+    padding:0;
+  }
+
+  </style>
+</head>
+<body>
+
+ <div id="js_plugins">
+
+</div>
+
+
+<script type="text/javascript">
+
+</script>
+
+</body>
+</html>