❤️❌ 如何用vue製作一個探探滑動元件

秋發表於2018-03-06

Vue元件

前言

嗨，說起探探想必各位程式汪都不陌生(畢竟妹子很多)，能在上面絲滑的翻牌子，探探的的堆疊滑動元件起到了關鍵的作用，下面就來看看如何用vue寫一個探探的堆疊元件 ?

一. 功能分析

簡單使用下探探會發現，堆疊滑動的功能很簡單，用一張圖概括就是:

簡單歸納下里麵包含的基本功能點:

圖片的堆疊
圖片第一張的滑動
條件成功後的滑出，條件失敗後的回彈
滑出後下一張圖片堆疊到頂部

體驗優化

根據觸控點的不同，滑動時首圖有不同角度偏移
偏移面積判定是否成功滑出

二. 具體實現

有了歸納好的功能點，我們實現元件的思路會更清晰

1. 堆疊效果

堆疊圖片效果在網上有大量的例項，實現的方法大同小異，主要通過在父層設定perspective及perspective-origin，來實現子層的透視，子層設定好translate3d Z軸數值即可模擬出堆疊效果，具體程式碼如下

// 圖片堆疊dom
 <!--opacity: 0 隱藏我們不想看到的stack-item層級-->
 <!--z-index: -1 調整stack-item層級"-->
<ul class="stack">
 <li class="stack-item" style="transform: translate3d(0px, 0px, 0px);opacity: 1;z-index: 10;"><img src="1.png" alt="01"></li>
 <li class="stack-item" style="transform: translate3d(0px, 0px, -60px);opacity: 1;z-index: 1"><img src="2.png" alt="02"></li>
 <li class="stack-item" style="transform: translate3d(0px, 0px, -120px);opacity: 1;z-index: 1"><img src="3.png" alt="03"></li>
 <li class="stack-item" style="transform: translate3d(0px, 0px, -180px);opacity: 0;z-index: -1"><img src="4.png" alt="04"></li>
 <li class="stack-item" style="transform: translate3d(0px, 0px, -180px);opacity: 0;z-index: -1"><img src="5.png" alt="05"></li>
</ul>
<style>
.stack {
    width: 100%;
    height: 100%;
    position: relative;
    perspective: 1000px; //子元素視距
    perspective-origin: 50% 150%; //子元素透視位置
    -webkit-perspective: 1000px;
    -webkit-perspective-origin: 50% 150%;
    margin: 0;
    padding: 0;
  }
  .stack-item{
    background: #fff;
    height: 100%;
    width: 100%;
    border-radius: 4px;
    text-align: center;
    overflow: hidden;
  }
  .stack-item img {
    width: 100%;
    display: block;
    pointer-events: none;
  }
</style>
複製程式碼

上面只是一組靜態程式碼，我們希望得到的是vue元件，所以需要先建立一個元件模板stack.vue，在模板中我們可以使用v-for，遍歷出stack節點，使用:style 來修改各個item的style，程式碼如下

<template>
    <ul class="stack">
      <li class="stack-item" v-for="(item, index) in pages" :style="[transform(index)]">
        <img :src="item.src">
      </li>
    </ul>
</template>
<script>
export default {
  props: {
    // pages資料包含基礎的圖片資料
    pages: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      // basicdata資料包含元件基本資料
      basicdata: {
        currentPage: 0 // 預設首圖的序列
      },
      // temporaryData資料包含元件臨時資料
      temporaryData: {
        opacity: 1, // 記錄opacity
        zIndex: 10, // 記錄zIndex
        visible: 3 // 記錄預設顯示堆疊數visible
      }
    }
  },
  methods: {
    // 遍歷樣式
    transform (index) {
      if (index >= this.basicdata.currentPage) {
        let style = {}
        let visible = this.temporaryData.visible
        let perIndex = index - this.basicdata.currentPage
        // visible可見數量前滑塊的樣式
        if (index <= this.basicdata.currentPage + visible - 1) {
          style['opacity'] = '1'
          style['transform'] = 'translate3D(0,0,' + -1 * perIndex * 60 + 'px' + ')'
          style['zIndex'] = visible - index + this.basicdata.currentPage
          style['transitionTimingFunction'] = 'ease'
          style['transitionDuration'] = 300 + 'ms'
        } else {
          style['zIndex'] = '-1'
          style['transform'] = 'translate3D(0,0,' + -1 * visible * 60 + 'px' + ')'
        }
        return style
      }
    }
  }
}
</script>
複製程式碼

關鍵點

:style可以繫結物件的同時，也可以繫結陣列和函式，這在遍歷的時候很有用

最基本的dom結構已經構建完畢，下一步是讓首張圖片“動”起來

2. 圖片滑動

圖片滑動效果，在很多場景中都有出現，其原理無非是監聽touchs事件，得到位移，再通過translate3D改變目標位移，因此我們要實現的步驟如下

對stack進行touchs事件的繫結
監聽並儲存手勢位置變化的數值
改變首圖css屬性中translate3D的x，y值

具體實現

在vue框架中，不建議直接操作節點，而是通過指令v-on對元素進行繫結，因此我們將繫結都寫在v-for遍歷裡，通過index進行判斷其是否是首圖，再使用:style修改首頁的樣式，具體程式碼如下:

<template>
    <ul class="stack">
      <li class="stack-item" v-for="(item, index) in pages"
      :style="[transformIndex(index),transform(index)]"
      @touchstart.stop.capture="touchstart"
      @touchmove.stop.capture="touchmove"
      @touchend.stop.capture="touchend"
      @mousedown.stop.capture="touchstart"
      @mouseup.stop.capture="touchend"
      @mousemove.stop.capture="touchmove">
        <img :src="item.src">
      </li>
    </ul>
</template>
<script>
export default {
  props: {
    // pages資料包含基礎的圖片資料
    pages: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      // basicdata資料包含元件基本資料
      basicdata: {
        start: {}, // 記錄起始位置
        end: {}, // 記錄終點位置
        currentPage: 0 // 預設首圖的序列
      },
      // temporaryData資料包含元件臨時資料
      temporaryData: {
        poswidth: '', // 記錄位移
        posheight: '', // 記錄位移
        tracking: false // 是否在滑動，防止多次操作，影響體驗
      }
    }
  },
  methods: {
    touchstart (e) {
      if (this.temporaryData.tracking) {
        return
      }
      // 是否為touch
      if (e.type === 'touchstart') {
        if (e.touches.length > 1) {
          this.temporaryData.tracking = false
          return
        } else {
          // 記錄起始位置
          this.basicdata.start.t = new Date().getTime()
          this.basicdata.start.x = e.targetTouches[0].clientX
          this.basicdata.start.y = e.targetTouches[0].clientY
          this.basicdata.end.x = e.targetTouches[0].clientX
          this.basicdata.end.y = e.targetTouches[0].clientY
        }
      // pc操作
      } else {
        this.basicdata.start.t = new Date().getTime()
        this.basicdata.start.x = e.clientX
        this.basicdata.start.y = e.clientY
        this.basicdata.end.x = e.clientX
        this.basicdata.end.y = e.clientY
      }
      this.temporaryData.tracking = true
    },
    touchmove (e) {
      // 記錄滑動位置
      if (this.temporaryData.tracking && !this.temporaryData.animation) {
        if (e.type === 'touchmove') {
          this.basicdata.end.x = e.targetTouches[0].clientX
          this.basicdata.end.y = e.targetTouches[0].clientY
        } else {
          this.basicdata.end.x = e.clientX
          this.basicdata.end.y = e.clientY
        }
        // 計算滑動值
        this.temporaryData.poswidth = this.basicdata.end.x - this.basicdata.start.x
        this.temporaryData.posheight = this.basicdata.end.y - this.basicdata.start.y
      }
    },
    touchend (e) {
      this.temporaryData.tracking = false
      // 滑動結束，觸發判斷
    },
    // 非首頁樣式切換
    transform (index) {
      if (index > this.basicdata.currentPage) {
        let style = {}
        let visible = 3
        let perIndex = index - this.basicdata.currentPage
        // visible可見數量前滑塊的樣式
        if (index <= this.basicdata.currentPage + visible - 1) {
          style['opacity'] = '1'
          style['transform'] = 'translate3D(0,0,' + -1 * perIndex * 60 + 'px' + ')'
          style['zIndex'] = visible - index + this.basicdata.currentPage
          style['transitionTimingFunction'] = 'ease'
          style['transitionDuration'] = 300 + 'ms'
        } else {
          style['zIndex'] = '-1'
          style['transform'] = 'translate3D(0,0,' + -1 * visible * 60 + 'px' + ')'
        }
        return style
      }
    },
    // 首頁樣式切換
    transformIndex (index) {
      // 處理3D效果
      if (index === this.basicdata.currentPage) {
        let style = {}
        style['transform'] = 'translate3D(' + this.temporaryData.poswidth + 'px' + ',' + this.temporaryData.posheight + 'px' + ',0px)'
        style['opacity'] = 1
        style['zIndex'] = 10
        return style
      }
    }
  }
}
</script>
複製程式碼

3. 條件成功後的滑出，條件失敗後的回彈

條件的觸發判斷是在touchend/mouseup後進行，在這裡我們先用簡單的條件進行判定，同時給予首圖彈出及回彈的效果，程式碼如下

<template>
    <ul class="stack">
      <li class="stack-item" v-for="(item, index) in pages"
      :style="[transformIndex(index),transform(index)]"
      @touchmove.stop.capture="touchmove"
      @touchstart.stop.capture="touchstart"
      @touchend.stop.capture="touchend"
      @mousedown.stop.capture="touchstart"
      @mouseup.stop.capture="touchend"
      @mousemove.stop.capture="touchmove">
        <img :src="item.src">
      </li>
    </ul>
</template>
<script>
export default {
  props: {
     // pages資料包含基礎的圖片資料
    pages: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      // basicdata資料包含元件基本資料
      basicdata: {
        start: {}, // 記錄起始位置
        end: {}, // 記錄終點位置
        currentPage: 0 // 預設首圖的序列
      },
      // temporaryData資料包含元件臨時資料
      temporaryData: {
        poswidth: '', // 記錄位移
        posheight: '', // 記錄位移
        tracking: false, // 是否在滑動，防止多次操作，影響體驗
        animation: false, // 首圖是否啟用動畫效果，預設為否
        opacity: 1 // 記錄首圖透明度
      }
    }
  },
  methods: {
    touchstart (e) {
      if (this.temporaryData.tracking) {
        return
      }
      // 是否為touch
      if (e.type === 'touchstart') {
        if (e.touches.length > 1) {
          this.temporaryData.tracking = false
          return
        } else {
          // 記錄起始位置
          this.basicdata.start.t = new Date().getTime()
          this.basicdata.start.x = e.targetTouches[0].clientX
          this.basicdata.start.y = e.targetTouches[0].clientY
          this.basicdata.end.x = e.targetTouches[0].clientX
          this.basicdata.end.y = e.targetTouches[0].clientY
        }
      // pc操作
      } else {
        this.basicdata.start.t = new Date().getTime()
        this.basicdata.start.x = e.clientX
        this.basicdata.start.y = e.clientY
        this.basicdata.end.x = e.clientX
        this.basicdata.end.y = e.clientY
      }
      this.temporaryData.tracking = true
      this.temporaryData.animation = false
    },
    touchmove (e) {
      // 記錄滑動位置
      if (this.temporaryData.tracking && !this.temporaryData.animation) {
        if (e.type === 'touchmove') {
          this.basicdata.end.x = e.targetTouches[0].clientX
          this.basicdata.end.y = e.targetTouches[0].clientY
        } else {
          this.basicdata.end.x = e.clientX
          this.basicdata.end.y = e.clientY
        }
        // 計算滑動值
        this.temporaryData.poswidth = this.basicdata.end.x - this.basicdata.start.x
        this.temporaryData.posheight = this.basicdata.end.y - this.basicdata.start.y
      }
    },
    touchend (e) {
      this.temporaryData.tracking = false
      this.temporaryData.animation = true
      // 滑動結束，觸發判斷
      // 簡單判斷滑動寬度超出100畫素時觸發滑出
      if (Math.abs(this.temporaryData.poswidth) >= 100) {
        // 最終位移簡單設定為x軸200畫素的偏移
        let ratio = Math.abs(this.temporaryData.posheight / this.temporaryData.poswidth)
        this.temporaryData.poswidth = this.temporaryData.poswidth >= 0 ? this.temporaryData.poswidth + 200 : this.temporaryData.poswidth - 200
        this.temporaryData.posheight = this.temporaryData.posheight >= 0 ? Math.abs(this.temporaryData.poswidth * ratio) : -Math.abs(this.temporaryData.poswidth * ratio)
        this.temporaryData.opacity = 0
      // 不滿足條件則滑入
      } else {
        this.temporaryData.poswidth = 0
        this.temporaryData.posheight = 0
      }
    },
    // 非首頁樣式切換
    transform (index) {
      if (index > this.basicdata.currentPage) {
        let style = {}
        let visible = 3
        let perIndex = index - this.basicdata.currentPage
        // visible可見數量前滑塊的樣式
        if (index <= this.basicdata.currentPage + visible - 1) {
          style['opacity'] = '1'
          style['transform'] = 'translate3D(0,0,' + -1 * perIndex * 60 + 'px' + ')'
          style['zIndex'] = visible - index + this.basicdata.currentPage
          style['transitionTimingFunction'] = 'ease'
          style['transitionDuration'] = 300 + 'ms'
        } else {
          style['zIndex'] = '-1'
          style['transform'] = 'translate3D(0,0,' + -1 * visible * 60 + 'px' + ')'
        }
        return style
      }
    },
    // 首頁樣式切換
    transformIndex (index) {
      // 處理3D效果
      if (index === this.basicdata.currentPage) {
        let style = {}
        style['transform'] = 'translate3D(' + this.temporaryData.poswidth + 'px' + ',' + this.temporaryData.posheight + 'px' + ',0px)'
        style['opacity'] = this.temporaryData.opacity
        style['zIndex'] = 10
        if (this.temporaryData.animation) {
          style['transitionTimingFunction'] = 'ease'
          style['transitionDuration'] = 300 + 'ms'
        }
        return style
      }
    }
  }
}
</script>
複製程式碼

4. 滑出後下一張圖片堆疊到頂部

重新堆疊是元件最後一個功能，同時也是最重要和複雜的功能。在我們的程式碼裡，stack-item的排序依賴繫結:style的transformIndex和transform函式，函式裡判定的條件是currentPage，那是不是改變currentPage，讓其+1，即可完成重新堆疊呢？

答案沒有那麼簡單，因為我們滑出是動畫效果，會進行300ms的時間，而currentPage變化引起的重排，會立即變化，打斷動畫的進行。因此我們需要先修改transform函式的排序條件，後改變currentPage。

具體實現

修改transform函式排序條件
讓currentPage+1
新增onTransitionEnd事件，在滑出結束後，重新放置stack列表中

程式碼如下：

<template>
    <ul class="stack">
      <li class="stack-item" v-for="(item, index) in pages"
      :style="[transformIndex(index),transform(index)]"
      @touchmove.stop.capture="touchmove"
      @touchstart.stop.capture="touchstart"
      @touchend.stop.capture="touchend"
      @mousedown.stop.capture="touchstart"
      @mouseup.stop.capture="touchend"
      @mousemove.stop.capture="touchmove"
      @webkit-transition-end="onTransitionEnd"
      @transitionend="onTransitionEnd"
      >
        <img :src="item.src">
      </li>
    </ul>
</template>
<script>
export default {
  props: {
    // pages資料包含基礎的圖片資料
    pages: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      // basicdata資料包含元件基本資料
      basicdata: {
        start: {}, // 記錄起始位置
        end: {}, // 記錄終點位置
        currentPage: 0 // 預設首圖的序列
      },
      // temporaryData資料包含元件臨時資料
      temporaryData: {
        poswidth: '', // 記錄位移
        posheight: '', // 記錄位移
        lastPosWidth: '', // 記錄上次最終位移
        lastPosHeight: '', // 記錄上次最終位移
        tracking: false, // 是否在滑動，防止多次操作，影響體驗
        animation: false, // 首圖是否啟用動畫效果，預設為否
        opacity: 1, // 記錄首圖透明度
        swipe: false // onTransition判定條件
      }
    }
  },
  methods: {
    touchstart (e) {
      if (this.temporaryData.tracking) {
        return
      }
      // 是否為touch
      if (e.type === 'touchstart') {
        if (e.touches.length > 1) {
          this.temporaryData.tracking = false
          return
        } else {
          // 記錄起始位置
          this.basicdata.start.t = new Date().getTime()
          this.basicdata.start.x = e.targetTouches[0].clientX
          this.basicdata.start.y = e.targetTouches[0].clientY
          this.basicdata.end.x = e.targetTouches[0].clientX
          this.basicdata.end.y = e.targetTouches[0].clientY
        }
      // pc操作
      } else {
        this.basicdata.start.t = new Date().getTime()
        this.basicdata.start.x = e.clientX
        this.basicdata.start.y = e.clientY
        this.basicdata.end.x = e.clientX
        this.basicdata.end.y = e.clientY
      }
      this.temporaryData.tracking = true
      this.temporaryData.animation = false
    },
    touchmove (e) {
      // 記錄滑動位置
      if (this.temporaryData.tracking && !this.temporaryData.animation) {
        if (e.type === 'touchmove') {
          this.basicdata.end.x = e.targetTouches[0].clientX
          this.basicdata.end.y = e.targetTouches[0].clientY
        } else {
          this.basicdata.end.x = e.clientX
          this.basicdata.end.y = e.clientY
        }
        // 計算滑動值
        this.temporaryData.poswidth = this.basicdata.end.x - this.basicdata.start.x
        this.temporaryData.posheight = this.basicdata.end.y - this.basicdata.start.y
      }
    },
    touchend (e) {
      this.temporaryData.tracking = false
      this.temporaryData.animation = true
      // 滑動結束，觸發判斷
      // 簡單判斷滑動寬度超出100畫素時觸發滑出
      if (Math.abs(this.temporaryData.poswidth) >= 100) {
        // 最終位移簡單設定為x軸200畫素的偏移
        let ratio = Math.abs(this.temporaryData.posheight / this.temporaryData.poswidth)
        this.temporaryData.poswidth = this.temporaryData.poswidth >= 0 ? this.temporaryData.poswidth + 200 : this.temporaryData.poswidth - 200
        this.temporaryData.posheight = this.temporaryData.posheight >= 0 ? Math.abs(this.temporaryData.poswidth * ratio) : -Math.abs(this.temporaryData.poswidth * ratio)
        this.temporaryData.opacity = 0
        this.temporaryData.swipe = true
        // 記錄最終滑動距離
        this.temporaryData.lastPosWidth = this.temporaryData.poswidth
        this.temporaryData.lastPosHeight = this.temporaryData.posheight
        // currentPage+1 引發排序變化
        this.basicdata.currentPage += 1
        // currentPage切換，整體dom進行變化，把第一層滑動置零
        this.$nextTick(() => {
          this.temporaryData.poswidth = 0
          this.temporaryData.posheight = 0
          this.temporaryData.opacity = 1
        })
      // 不滿足條件則滑入
      } else {
        this.temporaryData.poswidth = 0
        this.temporaryData.posheight = 0
        this.temporaryData.swipe = false
      }
    },
    onTransitionEnd (index) {
      // dom發生變化後，正在執行的動畫滑動序列已經變為上一層
      if (this.temporaryData.swipe && index === this.basicdata.currentPage - 1) {
        this.temporaryData.animation = true
        this.temporaryData.lastPosWidth = 0
        this.temporaryData.lastPosHeight = 0
        this.temporaryData.swipe = false
      }
    },
    // 非首頁樣式切換
    transform (index) {
      if (index > this.basicdata.currentPage) {
        let style = {}
        let visible = 3
        let perIndex = index - this.basicdata.currentPage
        // visible可見數量前滑塊的樣式
        if (index <= this.basicdata.currentPage + visible - 1) {
          style['opacity'] = '1'
          style['transform'] = 'translate3D(0,0,' + -1 * perIndex * 60 + 'px' + ')'
          style['zIndex'] = visible - index + this.basicdata.currentPage
          style['transitionTimingFunction'] = 'ease'
          style['transitionDuration'] = 300 + 'ms'
        } else {
          style['zIndex'] = '-1'
          style['transform'] = 'translate3D(0,0,' + -1 * visible * 60 + 'px' + ')'
        }
        return style
      // 已滑動模組釋放後
      } else if (index === this.basicdata.currentPage - 1) {
        let style = {}
        // 繼續執行動畫
        style['transform'] = 'translate3D(' + this.temporaryData.lastPosWidth + 'px' + ',' + this.temporaryData.lastPosHeight + 'px' + ',0px)'
        style['opacity'] = '0'
        style['zIndex'] = '-1'
        style['transitionTimingFunction'] = 'ease'
        style['transitionDuration'] = 300 + 'ms'
        return style
      }
    },
    // 首頁樣式切換
    transformIndex (index) {
      // 處理3D效果
      if (index === this.basicdata.currentPage) {
        let style = {}
        style['transform'] = 'translate3D(' + this.temporaryData.poswidth + 'px' + ',' + this.temporaryData.posheight + 'px' + ',0px)'
        style['opacity'] = this.temporaryData.opacity
        style['zIndex'] = 10
        if (this.temporaryData.animation) {
          style['transitionTimingFunction'] = 'ease'
          style['transitionDuration'] = 300 + 'ms'
        }
        return style
      }
    }
  }
}
</script>
複製程式碼

ok~ 完成了上面的四步，堆疊元件的基本功能就已經實現，快來看看效果吧

堆疊滑動效果已經出來了，但是探探在體驗上，還增加了觸碰角度偏移，以及判定滑出面積比例

角度偏移的原理，是在使用者每次進行touch時，記錄使用者觸碰位置，計算出最大的偏移角度，在滑動出現位移時，線性增加角度以至最大的偏移角度。使用在stack中具體要做的是：

touchmove中計算出所需角度和方向
touchend及onTransitionEnd中將角度至零

判定滑出面積比例，主要通過偏移量計算出偏移面積，從而得到面積比例，完成判斷

完整的程式碼和demo可以在github上檢視原始碼，這裡就不貼出來了

謝謝大家看完這篇文章，喜歡可以在github上給個⭐️ ，最後祝大家在探探上都能找到前女友?

分享我寫的另一個vue-slider元件vue-consise-slider

最近在找新工作，座標廣州，三年前端經驗，熟悉vue，有工作介紹的朋友可以郵箱聯絡我warpcgd@qq.com

如何用 vue 製作一個探探滑動元件
2018-03-14
Vue元件
Vue|NuxtJs仿探探介面|vue實現Tinder卡片疊加滑動效果
2020-10-13
VueUXJS
vue-concise-slider vue滑動元件
2019-02-16
VueIDE元件
如何用CSS製作一個圓形放大鏡
2021-09-09
CSS
iOS 一個滑動選擇控制元件
2019-03-18
iOS控制元件
vue移動端側滑皮膚元件
2018-04-15
Vue元件
寫了個移動端可滑動（慣性滑動&回彈）Vue導航欄元件 ly-tab
2018-03-03
Vue元件
Vue無限滑動周選擇日期的元件
2018-07-17
Vue元件
使用ResizeObserver製作響應式Vue元件
2018-07-18
ServerVue元件
用Flutter實現一個仿“探探”的左右滑動選擇喜歡/不喜歡的效果
2018-10-25
Flutter
如何用CSS3製作一個漂亮的登入框
2017-12-13
CSSS3
論如何用Vue實現一個彈窗-一個簡單的元件實現
2019-02-16
Vue元件
少女風vue元件庫製作全攻略~~
2019-05-14
Vue元件
如何用React寫一個Modal元件
2019-04-08
React元件
移動端左滑右滑元件
2019-02-02
元件
原生js拖拽功能製作滑動條例項教程
2021-02-04
JS
用Vue擼一個『A-Z字母滑動檢索選單』
2018-08-11
Vue
使用 dataview 元件製作一覽表
2013-12-03
View元件
如何用Unity GUI製作HUD
2015-03-19
UnityGUI
【vue/axios/vue-router】製作一個精緻的美團專案
2018-05-18
VueiOS
Vue 仿QQ左滑刪除元件
2019-03-04
Vue元件
寫一個VUE元件有感
2017-08-22
Vue元件
使用 jQuery 和 CSS3 製作滑動導航選單
2015-01-27
jQueryCSSS3
一起來學習如何用 Node 來製作 CLI
2019-03-01
vue的一個分頁元件
2017-12-25
Vue元件
使用Vue製作一個屬於自己的音樂播放器！
2020-11-01
Vue播放器
Unity製作一個小星球
2022-04-23
Unity
如何用Python製作自己的遊戲
2020-08-04
Python遊戲
如何用CSS製作橫向選單?
2005-05-08
CSS
粘性控制元件，滑動停留StickLayout（導航欄滑動停留）
2018-01-05
控制元件
如何用原生js來寫一個swiper滑塊外掛（上）原理
2019-05-27
JS
vue路由切換滑動效果
2024-05-21
Vue路由
製作一個文件同步工具，自動同步到gitee中。。。
2021-12-23
Gitee
vue-floating 浮窗元件、封裝基於better-scroll的滑動元件、vue自定義手勢指令
2019-09-02
Vue元件封裝
Vue的第一個元件設計
2018-12-30
Vue元件
哪個軟體可以製作GIF表情包動態圖製作方法
2019-03-21
Golang簡單製作一個池
2021-06-15
Golang
製作一個Mac APP：XcodeExtension
2019-02-01
MacAPPXCode

❤️❌ 如何用vue製作一個探探滑動元件

前言

一. 功能分析

二. 具體實現

1. 堆疊效果

關鍵點

2. 圖片滑動

具體實現

3. 條件成功後的滑出，條件失敗後的回彈

4. 滑出後下一張圖片堆疊到頂部

具體實現

相關文章