V3.2.0 #1

1.重新制作了coverflow效果
2.解决和优化了内部按钮prevent的问题

README.md

@@ -11,7 +11,7 @@
 vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端
 
 ## 版本
-[v3.1.1](https://github.com/warpcgd/vue-concise-slider/issues/29) 支持vue2.0+
+[v3.2.0](https://github.com/warpcgd/vue-concise-slider/issues/29) 支持vue2.0+
 
 ## 特点
 * 简单配置
@@ -32,11 +32,11 @@ vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全
 - [x] 使用slot替代page
 - [x] 自定义分页
 - [x] 居中滑动
+- [x] 新的coverflow
 
 ### 未来将实现
 - [ ] 层级嵌套slider
 - [ ] 虚拟slider
-- [ ] 新的coverflow
 
 ### 链接
 

README_EN.md

@@ -11,7 +11,7 @@ English | [中文](README.md)
 vue-concise-slider,A simple sliding component,has easy configuration,supported self-adaption / fullscreen / button / page,and is compatible with mobile and PC terminal
 
 ### version
-[v3.1.1](https://github.com/warpcgd/vue-concise-slider/issues/29)  Supported vue2.0+
+[v3.2.0](https://github.com/warpcgd/vue-concise-slider/issues/29)  Supported vue2.0+
 
 ### Features
 
@@ -33,11 +33,11 @@ vue-concise-slider,A simple sliding component,has easy configuration,supported s
 - [x] Use slideritem instead of page
 - [x] Custom paging
 - [x] Center slide
+- [x] New coverflow
 
 ### To Do List
 - [ ] Hierarchical nested slider
 - [ ] Virtual slider
-- [ ] New coverflow
 
 ### Links
 

src/components/slider.vue

@@ -2,20 +2,20 @@
     <div class='slider-container' :class = 's_data.containerClass' @mouseleave="swipeOut">
       <div class='slider-touch'
       :style="styleobj"
-      @touchmove.stop.prevent="swipeMove"
-      @touchstart.stop.prevent="swipeStart"
-      @touchend.stop.prevent="swipeEnd"
-      @mousedown.stop.prevent="swipeStart"
-      @mouseup.stop.prevent="swipeEnd"
-      @mousemove.stop.prevent="swipeMove"
+      @touchmove.stop="swipeMove"
+      @touchstart="swipeStart"
+      @touchend="swipeEnd"
+      @mousedown="swipeStart"
+      @mouseup="swipeEnd"
+      @mousemove.stop="swipeMove"
       @webkit-transition-end="onTransitionEnd"
       @transitionend="onTransitionEnd"
       >
-      <div class="slider-wrapper" :class="classObject" v-if="pages.length === 0 && options.effect !== 'coverflow'">
-        <slot></slot>
+      <div class="slider-wrapper" :class="classObject" v-if="pages.length === 0">
+        <slot :options="options" :data="data" :s_data="s_data"></slot>
       </div>
       <!-- 组件在 vm.currentview 变化时改变！ -->
-      <component v-if="pages.length !== 0" :pages="pages" :options="options" :data="data" :s_data="s_data" v-bind:is="currentView"></component>
+      <!-- <component v-if="pages.length !== 0" :pages="pages" :options="options" :data="data" :s_data="s_data" v-bind:is="currentView"></component> -->
       </div>
       <div v-if="s_data.pagination" class="slider-pagination slider-pagination-bullets">
         <template v-for="n in (pagenums||s_data.sliderLength)">
@@ -33,7 +33,7 @@ import detectPrefixes from '../utils/detect-prefixes.js'
 // import sliderBasic from './slider_basic.vue'
 // import sliderBasicLoop from './slider_basic_loop.vue'
 // import sliderFade from './slider_fade.vue'
-import sliderCoverflow from './slider_coverflow.vue'
+// import sliderCoverflow from './slider_coverflow.vue'
 // import renderpagination from './pagination_render.vue'
 export default {
   props: {
@@ -123,9 +123,9 @@ export default {
       // if (this.s_data.effect === 'fade') {
       //   return this.options.loop ? 'fadeLoop' : 'fade'
       // }
-      if (this.s_data.effect === 'coverflow') {
-        return this.options.loop ? 'coverflow' : 'coverflow'
-      }
+      // if (this.s_data.effect === 'coverflow') {
+      //   return this.options.loop ? 'coverflow' : 'coverflow'
+      // }
     },
     // 组件的核心，计算当前父级需要进行的偏移,每次要遍历节点
     currentWidth: {
@@ -317,14 +317,27 @@ export default {
           this.data.end.x = e.clientX
           this.data.end.y = e.clientY
         }
-        if (this.options.direction === 'vertical') {
-          this.data.posheight = -(this.currentHeight) + this.data.end.y - this.data.start.y + 'px'
-          return
+        let deltaX = Math.abs(this.data.end.x - this.data.start.x)
+        let deltaY = Math.abs(this.data.end.y - this.data.start.y)
+        if (deltaX >= deltaY && this.options.direction !== 'vertical') {
+          e.preventDefault()
+        } else if (deltaX <= deltaY && this.options.direction === 'vertical') {
+          e.preventDefault()
         }
         if (effect === 'fade' || effect === 'coverflow') {
           return
         }
-        this.data.poswidth = -(this.currentWidth) + this.data.end.x - this.data.start.x + 'px'
+        if (this.options.direction === 'vertical') {
+          if (deltaX > deltaY) {
+            return
+          }
+          this.data.posheight = -(this.currentHeight) + this.data.end.y - this.data.start.y + 'px'
+        } else {
+          if (deltaX < deltaY) {
+            return
+          }
+          this.data.poswidth = -(this.currentWidth) + this.data.end.x - this.data.start.x + 'px'
+        }
       }
     },
     swipeEnd (e) {
@@ -343,7 +356,9 @@ export default {
         }, this.options.autoplay)
       }
       // 解除阻止
-      document.removeEventListener('touchmove', this.preventDefault(e))
+      if (this.options.preventDocumentMove === true) {
+        document.removeEventListener('touchmove', this.preventDefault(e))
+      }
       if (deltaTime > this.s_data.thresholdTime) {
         this.slide(currentPage)
         /* gesture too slow */
@@ -481,7 +496,9 @@ export default {
           children[currentPage].addActive()
         }
         if (currentPage < 0 || currentPage >= (this.pagenums || sliderLength)) {
-          sliderItem[currentPage + loopedSlides].classList.add('slider-active-copy')
+          if (sliderItem[currentPage + loopedSlides] && sliderItem[currentPage + loopedSlides].classList) {
+            sliderItem[currentPage + loopedSlides].classList.add('slider-active-copy')
+          }
           let lastPage = currentPage < 0 ? (this.pagenums || sliderLength) + currentPage : 0 + currentPage - (this.pagenums || sliderLength)
           children[lastPage].addActive()
         } else {
@@ -572,7 +589,7 @@ export default {
         let sliderItem = slideDom.getElementsByClassName('slider-item')
         // that.s_data.sliderLength = sliderItem.length
         // loop && effect !== 'fade'
-        if (that.s_data.sliderLength > 1 && that.options.loop && that.options.effect !== 'fade') {
+        if (that.s_data.sliderLength > 1 && that.options.loop && that.options.effect !== 'fade' && that.options.effect !== 'coverflow') {
           // 先清空上次添加的节点
           let sliderCopy = slideDom.getElementsByClassName('slider-copy')
           for (let i = sliderCopy.length - 1; i >= 0; i--) {
@@ -625,7 +642,7 @@ export default {
     // basicLoop: sliderBasicLoop,
     // fade: sliderFade,
     // fadeLoop: sliderFade,
-    coverflow: sliderCoverflow,
+    // coverflow: sliderCoverflow,
     renderpagination: { // eslint-disable-line
       render: function (createElement) {
         let index = this.index
@@ -712,10 +729,6 @@ export default {
   color: #fff;
   /*display: inline-block;*/
 }
-.slider-item {
-  background-position: center center !important;
-  background-size: cover !important;
-}
 
 .slider-fade .slider-item {
   position: absolute;

src/components/slider_item.vue

@@ -2,13 +2,16 @@
   <div 
   @webkit-transition-end="onTransitionEnd"
   @transitionend="onTransitionEnd" 
-  :class="slideClass">
+  :class="slideClass"
+  :style="[transform(index)]"
+  >
     <slot></slot>
   </div>
 </template>
 
 <script>
 export default {
+  props: ['options', 'data', 's_data', 'index', 'pageLength'],
   name: 'slideritem',
   data () {
     return {
@@ -20,6 +23,7 @@ export default {
   },
   mounted () {
     this.renderDom()
+    // console.log(this.options)
   },
   methods: {
     renderDom () {
@@ -37,6 +41,81 @@ export default {
       if (this.$parent) {
         this.$parent.onItemTransitionEnd(e)
       }
+    },
+    transform: function () {
+      if (!this.options || !this.data || !this.s_data || !this.$el) {
+        return {}
+      }
+      let index = this.index
+      let winWidth = this.s_data.pageWidth
+      let height = this.s_data.pageHeight
+      let width = this.$el.offsetWidth
+      let offsetWidth = winWidth / 2 - width / 2
+      let leftWidth = offsetWidth - this.s_data.deviation + 'px'
+      let rightWidth = offsetWidth + this.s_data.deviation + 'px'
+      let centerWidth = offsetWidth + 'px'
+      let style = {}
+      // 基本
+      if (index === this.data.currentPage - 1 || (index === this.pageLength - 2 && this.data.currentPage === -1)) {
+        // style['left'] = leftWidth
+        style['transform'] = 'translate3D(' + leftWidth + ',0 ,0)'
+        style['width'] = width * this.s_data.widthScalingRatio + 'px'
+        style['height'] = height * this.s_data.heightScalingRatio + 'px'
+        style['opacity'] = '1'
+        if (this.data.direction === 'left') {
+          style['z-index'] = '10'
+        } else {
+          style['z-index'] = '1'
+        }
+      } else if (index === this.data.currentPage + 1 || (index === 1 && this.data.currentPage === this.pageLength)) {
+        // style['left'] = rightWidth
+        style['transform'] = 'translate3D(' + rightWidth + ',0 ,0)'
+        style['width'] = width * this.s_data.widthScalingRatio + 'px'
+        style['height'] = height * this.s_data.heightScalingRatio + 'px'
+        style['opacity'] = '1'
+        if (this.data.direction === 'left') {
+          style['z-index'] = '1'
+        } else {
+          style['z-index'] = '10'
+        }
+      } else if (index === this.data.currentPage) {
+        // style['left'] = centerWidth
+        style['transform'] = 'translate3D(' + centerWidth + ',0 ,0)'
+        style['z-index'] = '99'
+        style['opacity'] = '1'
+      } else {
+        style['transform'] = 'translate3D(' + centerWidth + ',0 ,0)'
+        // style['left'] = centerWidth
+        style['opacity'] = '0'
+      }
+      // 循环拓展
+      if (index === this.pageLength - 1 && this.data.currentPage === 0) {
+        style['transform'] = 'translate3D(' + leftWidth + ',0 ,0)'
+        // style['left'] = leftWidth
+        style['width'] = width * this.s_data.widthScalingRatio + 'px'
+        style['height'] = height * this.s_data.heightScalingRatio + 'px'
+        style['opacity'] = '1'
+      }
+      if (index === 0 && this.data.currentPage === this.pageLength - 1) {
+        style['transform'] = 'translate3D(' + rightWidth + ',0 ,0)'
+        // style['left'] = rightWidth
+        style['width'] = width * this.s_data.widthScalingRatio + 'px'
+        style['height'] = height * this.s_data.heightScalingRatio + 'px'
+        style['opacity'] = '1'
+      }
+      // 切换优化
+      if (((index === this.pageLength - 1 || index === this.pageLength - 2) && this.data.currentPage === -1) || ((index === 0 || index === 1) && this.data.currentPage === this.pageLength)) {
+        style['opacity'] = '1'
+        if (index === 0) {
+          style['z-index'] = '99'
+        }
+        if (index === this.pageLength - 1) {
+          style['z-index'] = '99'
+        }
+      }
+      style[this.s_data.prefixes.transition + 'Duration'] = (this.s_data.animation ? this.options.speed || 300 : 0) + 'ms'
+      style['position'] = 'absolute'
+      return style
     }
   }
 }

src/demo/slider_coverFlow.vue

@@ -18,7 +18,10 @@
 <template>
   <div>
     <div style="width:70%;margin:20px auto;height:400px">
-      <slider ref="slider" :pages="someList" :options="options" @slide='slide' @tap='onTap' @init='onInit'>
+      <slider ref="slider" :options="options" @slide='slide' @tap='onTap' @init='onInit'>
+        <template slot-scope="slotProps">
+          <slideritem v-for="(item,index) in someList" :pageLength="someList.length" :options="slotProps.options" :data="slotProps.data" :s_data="slotProps.s_data" :index="index" :key="index" :style="item.style">{{item.html}}</slideritem>
+        </template>
         <div slot="loading">
           <div class="loadingDot">
             <i></i>
@@ -43,6 +46,7 @@
 </template>
 <script>
 import slider from '../components/slider'
+import slideritem from '../components/slider_item'
 export default {
   el: '#slidercoverFlow',
   data () {
@@ -51,10 +55,9 @@ export default {
       options: {
         effect: 'coverflow',
         currentPage: 1,
-        tracking: false,
         thresholdDistance: 100, // 滑动距离阈值判定
         thresholdTime: 300, // 滑动时间阈值判定
-        deviation: 200, // 偏移值
+        deviation: 300, // 偏移值
         widthScalingRatio: 0.8, // 宽度缩放比例
         heightScalingRatio: 0.8, // 高度缩放比例
         loopedSlides: 2, // 多级滚动时，需要添加前后遍历数
@@ -65,7 +68,8 @@ export default {
     }
   },
   components: {
-    slider
+    slider,
+    slideritem
   },
   mounted () {
     let that = this