Swiper: Fix click to fail when only two swiper-item and loop #1484

src/components/swiper/metas.yml

@@ -82,6 +82,11 @@ props:
     en: index value, use `v-model` for binding
     zh-CN: index 绑定，使用`v-model`，一般不需要绑定
 changes:
+  next:
+    en:
+      - '[fix] Fix click to fail when only two swiper-item and loop #1484 @unclay'
+    zh-CN:
+      - '[fix] 修复只有两个轮播图且为 loop 时点击失效问题 #1484 @unclay'
   v2.2.1-rc.2:
     en:
       - '[enhance] Use document width as swiper width if initial width is 0 #1188'

src/components/swiper/swiper.js

@@ -78,9 +78,6 @@ class Swiper {
   }
 
   _init () {
-    if (this._options.loop) {
-      this._loopTwoItems()
-    }
     this._height = this._options.height === 'auto' ? 'auto' : this._options.height - 0
     this.updateItemWidth()
     this._initPosition()
@@ -204,21 +201,6 @@ class Swiper {
     me.$items[1] && me.$items[1].addEventListener('webkitTransitionEnd', me.transitionEndHandler, false)
   }
 
-  _loopTwoItems () {
-    // issue #596 (support when onlt two)
-    if (this.count === 2) {
-      let div = document.createElement('div')
-      let $item
-      for (let i = this.$items.length - 1; i >= 0; i--) {
-        div.innerHTML = this.$items[i].outerHTML
-        $item = div.querySelector(this._options.item)
-        $item.classList.add(`${this._options.item.replace('.', '')}-clone`)
-        this.$container.appendChild($item)
-      }
-      this.realCount = 4
-    }
-  }
-
   _loopRender () {
     const me = this
     if (me._loop()) {

src/components/swiper/swiper.vue

@@ -8,6 +8,12 @@
           <p class="vux-swiper-desc" v-if="showDescMask">{{item.title}}</p>
         </a>
       </div>
+      <div v-if="listTwoLoopItem.length > 0" class="vux-swiper-item vux-swiper-item-clone" v-for="(item, index) in listTwoLoopItem" @click="clickListItem(item)" :data-index="index">
+        <a href="javascript:">
+          <div class="vux-img" :style="{backgroundImage: buildBackgroundUrl(item.img)}"></div>
+          <p class="vux-swiper-desc" v-if="showDescMask">{{item.title}}</p>
+        </a>
+      </div>
     </div>
     <div :class="[dotsClass, 'vux-indicator', 'vux-indicator-' + dotsPosition]" v-show="showDots">
       <a href="javascript:" v-for="key in length">
@@ -29,6 +35,7 @@ export default {
     }
   },
   mounted () {
+    this.hasTwoLoopItem()
     this.$nextTick(() => {
       if (!(this.list && this.list.length === 0)) {
         this.render(this.index)
@@ -37,6 +44,11 @@ export default {
     })
   },
   methods: {
+    hasTwoLoopItem () {
+      if (this.list.length === 2 && this.loop) {
+        this.listTwoLoopItem = this.list
+      }
+    },
     clickListItem (item) {
       go(item.url, this.$router)
       this.$emit('on-click-list-item', JSON.parse(JSON.stringify(item)))
@@ -70,6 +82,7 @@ export default {
       if (!this.$el) {
         return
       }
+      this.hasTwoLoopItem()
       this.$nextTick(() => {
         this.index = this.value || 0
         this.current = this.value || 0
@@ -153,7 +166,9 @@ export default {
       current: this.index || 0,
       xheight: 'auto',
       length: this.list.length,
-      index: 0
+      index: 0,
+      // issue #1484 Fix click to fail
+      listTwoLoopItem: []
     }
   },
   watch: {

src/demos/Swiper.vue

@@ -98,7 +98,7 @@
     <swiper loop auto :list="demo06_list" :index="demo06_index" @on-index-change="demo06_onIndexChange"></swiper>
     <p>current index: {{demo06_index}}</p>
 
-    <group-title>循环模式（只有两个）</group-title>
+    <group-title>循环模式（只有两个且可点击）</group-title>
     <swiper loop auto :list="demo07_list" :index="demo07_index" @on-index-change="demo07_onIndexChange"></swiper>
     <p>current index: {{demo07_index}}</p>
   </div>
@@ -138,7 +138,10 @@ const demoList = imgList.map((one, index) => ({
   img: one
 }))
 
-const only2List = baseList.slice(0, 2)
+const only2ClickList = baseList.slice(0, 2).map(item => {
+  item.url = 'http://m.baidu.com'
+  return item
+})
 
 export default {
   components: {
@@ -179,7 +182,7 @@ export default {
       demo04_list: imgList,
       demo05_list: [],
       demo06_list: urlList,
-      demo07_list: only2List,
+      demo07_list: only2ClickList,
       demo01_index: 0,
       demo02_index: 1,
       demo05_index: 0,