不到200行用Vue實現類似Swiper.js的輪播組件

来源:https://www.cnblogs.com/zyronon/p/18151917
-Advertisement-
Play Games

前言 大家在開發過程中，或多或少都會用到輪播圖之類的組件，PC和Mobile上使用 Swiper.js ，小程式上使用swiper組件等。 本文將詳細講解如何用Vue一步步實現的類似Swiper.js的功能，無任何第三方依賴，乾貨滿滿。 最終效果 線上預覽：https://zyronon.githu ...


前言

大家在開發過程中，或多或少都會用到輪播圖之類的組件，PC和Mobile上使用 Swiper.js ，小程式上使用swiper組件等。

本文將詳細講解如何用Vue一步步實現的類似Swiper.js的功能，無任何第三方依賴，乾貨滿滿。

最終效果

線上預覽：https://zyronon.github.io/douyin/

項目源代碼：https://github.com/zyronon/douyin

註意：PC 必須將瀏覽器切到手機模式，先按 F12 調出控制台，再按 Ctrl+Shift+M才能正常預覽

Demo代碼

上面的預覽地址是最終實現的效果，下麵才是本文代碼實現的效果

為提升閱讀體驗，正文中代碼展示有部分省略處理，完整代碼可以在codesandbox上查看：
https://codesandbox.io/p/devbox/mutable-grass-zm4gl5

實現原理

佈局

我們需要用到兩個div，父元素 slide 設置 overflow: hidden 禁止滾動，子元素 slide-list 使用 flex 佈局，然後將需要滾動的頁面做為孫元素放在子元素 slide-list 中，由於子元素 slide-list 是 flex 佈局，頁面會自然的平鋪排列

因為父元素 slide 的overflow: hidden屬性會將內容裁減，不提供滾動條，也不允許用戶滾動，所以我們只能看到父元素 slide 寬高的內容。

<div class="slide">
  <div class="slide-list">
    <slot></slot>
  </div>
</div>

.slide {
  touch-action: none;
  height: 100%;
  width: 100%;
  transition: height 0.3s;
  position: relative;
  overflow: hidden;
}

 .slide-list {
    height: 100%;
    width: 100%;
    display: flex;
    position: relative;
  }

滑動

實現滾動的關鍵點在於CSS3的 transform: translate(0, 0) 屬性。

translate()  這個 CSS 函數在水平和/或垂直方向上重新定位元素，它的坐標定義了元素在每個方向上移動了多少。

因為子元素 slide-list 的內容是平鋪的，我們只需要在子元素 slide-list 監聽對應的事件，計算滑動的距離x或y，再動態設置到子元素 slide-list 的transform: translate(x, y)裡面，就可以實現頁面滑動了

總結

大家可以將整個流程理解為播放膠片電影：父元素 A 是放映機，子元素 B 是膠片，而頁面是印刷在膠片上的內容。膠片每移動一格，我們就能看到新的一幀電影

實現

監聽事件

PC 上的點擊、移動，H5 的手勢操作，都離不開 DOM 事件監聽。例如滑鼠移動事件對應 mousemove，移動端因為沒有滑鼠則對應 touchmove
我們可以通過 Pointer 事件進行多端統一的事件監聽，實現觸屏和 PC 端通用

<div class="slide horizontal">
  <div
      class="slide-list"
      ref="wrapperEl"
      @pointerdown="onPointerDown"
      @pointermove="onPointerMove"
      @pointerup="onPointerUp"
  >
    <slot></slot>
  </div>
</div>

初始化

組件預設變數

//slide-list的ref引用
const wrapperEl = ref(null)

const state = reactive({
  judgeValue: 20,//一個用於判斷滑動朝向的固定值
  type: SlideType.VERTICAL,//組件類型
  name: props.name,
  localIndex: props.index,//當前下標
  needCheck: true,//是否需要檢測，每次按下都需要檢測，up事件會重置為true
  next: false,//能否滑動
  isDown: false,//是否按下，用於move事件判斷
  start: {x: 0, y: 0, time: 0},//按下時的起點坐標
  move: {x: 0, y: 0},//移動時的坐標
  wrapper: {width: 0, height: 0, childrenLength: 0}//slide-list的寬度和子元素數量
})

function slidePointerDown(e, el, state) {
  Utils.$setCss(el, 'transition-duration', `0ms`)
  //記錄起點坐標，用於move事件計算移動距離
  state.start.x = e.pageX
  state.start.y = e.pageY
  //記錄按下時間，用於up事件判斷滑動時間
  state.start.time = Date.now()
  state.isDown = true
}

雖然我們用 Pointer事件統一了移動端和PC端的監聽事件，但 pointermove 事件在 PC 和移動端表現出來的效果卻不一樣，在 PC 上， pointermove 事件和 mousemove 事件一致，只要滑鼠在目標元素上方，就會觸發。而在移動端上卻只有按下並移動時發才會觸發

所以這裡用一個 isDown 的變數保存是否按下的狀態，pointermove事件雖然會一直觸發，但僅當 isDown 時才執行我們的代碼邏輯

移動過程

function slidePointerMove(e,el,state) {
  if (!state.isDown) return;

  //計算移動距離
  state.move.x = e.pageX - state.start.x
  state.move.y = e.pageY - state.start.y

  //檢測能否滑動
  let canSlideRes = canSlide(state)

  //是否是往下（右）滑動
  let isNext = state.type === SlideType.HORIZONTAL ? state.move.x < 0 : state.move.y < 0

  if (canSlideRes) {
    if (canNext(state, isNext)) {
      //能滑動，那就把事件捕獲，不能給父組件處理
      Utils.$stopPropagation(e)

      //獲取偏移量
      let t = getSlideOffset(state, el) + (isNext ? state.judgeValue : -state.judgeValue)
      let dx1 = 0,
        dx2 = 0
      //偏移量加當前手指移動的距離就是slide要偏移的值
      if (state.type === SlideType.HORIZONTAL) {
        dx1 = t + state.move.x
      } else {
        dx2 = t + state.move.y
      }
      Utils.$setCss(el, 'transition-duration', `0ms`)
      Utils.$setCss(el, 'transform', `translate(${dx1}px, ${dx2}px)`)
    }
  }
}

用滑鼠當前的位置，再減去滑鼠按下時的位置，就是滑鼠移動的距離
移動距離再加上當前頁面 * 每個頁面的寬或高，即子元素 slide-list 整體要偏移的量

技術難點

1. 如何判斷滑動方向？是在上下滑還是左右滑？
//檢測在對應方向上能否允許滑動，比如SlideHorizontal組件就只處理左右滑動事件，SlideVertical 
//只處理上下滑動事件 
export function canSlide(state) {
  //每次按下都需要檢測，up事件會重置為true
  if (state.needCheck) {
    //判斷move x和y的距離是否大於判斷值，因為距離太小無法判斷滑動方向
    if (Math.abs(state.move.x) > state.judgeValue || Math.abs(state.move.y) > state.judgeValue) {
      //放大再相除，根據長寬比判斷方向，angle大於1就是左右滑動，小於是上下滑動
      let angle = (Math.abs(state.move.x) * 10) / (Math.abs(state.move.y) * 10)
      //根據當前slide的類型，判斷能否滑動，並記錄下來，後續不再判斷，直接返回記錄值
      state.next = state.type === SlideType.HORIZONTAL ? angle > 1 : angle <= 1
      state.needCheck = false
    } else {
      return false
    }
  }
  return state.next
}

放大移動距離後再相除，根據結果是否大於1判斷出滑動方向

2. 如何處理嵌套組件中的事件衝突？什麼時候攔截事件和放行事件？

由於事件的冒泡機制，事件是從最裡面的元素一級一級的往上冒泡的，所以我們只需在滿足下麵兩個條件時攔截事件即可

  1. 是否在往到頭或尾滑動
    如果在第一頁，不能往左/上滑動
    如果在最後一面， 不能往右/下滑動
function canNext(state, isNext) {
  return !(
    (state.localIndex === 0 && !isNext) ||
    (state.localIndex === state.wrapper.childrenLength - 1 && isNext)
  )
}
  1. 滑動方向和組件類型相匹配
  • SlideHorizontal.vue 組件只允許向左/右滑動
  • SlideVertical.vue 組件只允許向上/下滑動

滿足上述兩個條件時攔截事件，不滿足放行事件，交給上一級組件處理

//檢測在對應方向上能否允許滑動
let canSlideRes = canSlide(state)
//是否是往下（右）滑動
let isNext = state.type === SlideType.HORIZONTAL ? state.move.x < 0 : state.move.y < 0
if (canSlideRes) {
  if (canNext(state, isNext)) {
    //能滑動，那就把事件捕獲，不能給父組件處理
    Utils.$stopPropagation(e)
    ...
    滑動邏輯
    ...
  }
}

結束滑動

function slidePointerUp(e, state) {
  if (!state.isDown) return;
  let isHorizontal = state.type === SlideType.HORIZONTAL
  let isNext = isHorizontal ? state.move.x < 0 : state.move.y < 0
  if (state.next) {
    if (canNext(state, isNext)) {
      //結合時間、距離來判斷是否成功滑動
      let endTime = Date.now()
      let gapTime = endTime - state.start.time
      let distance = isHorizontal ? state.move.x : state.move.y
      let judgeValue = isHorizontal ? state.wrapper.width : state.wrapper.height
      //1、距離太短，直接不通過
      if (Math.abs(distance) < 20) gapTime = 1000
      //2、距離太長，直接通過
      if (Math.abs(distance) > judgeValue / 3) gapTime = 100
      //3、若不在上述兩種情況，那麼只需要判斷時間即可
      if (gapTime < 150) {
        if (isNext) state.localIndex++
        else state.localIndex--
      }
    }
  } 
  // 重置變數
  Utils.$setCss(el, 'transition-duration', `300ms`)
  let t = getSlideOffset(state, el)
  let dx1 = 0,dx2 = 0
  if (state.type === SlideType.HORIZONTAL) dx1 = t
  else dx2 = t
  Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`)
  ...
}

技術難點

  • 如何讓滑動結束時的動畫更絲滑？
    結合滑動時間、滑動距離來判斷滑動下一條還是保持當前條
    1、距離太短，直接不通過
    2、距離太長，直接通過
    3、若不在上述兩種情況，那麼只需要判斷時間即可，小於150毫秒以內就算是成功滑動

其他問題

PC 上滑動有圖片的頁面，圖片“分叉”了：我們開始拖動它的“克隆”

這是因為瀏覽器有自己的對圖片和一些其他元素的拖放處理。它會在我們進行拖放操作時自動運行，並與我們的拖放處理產生了衝突

禁用它：

@dragstart="(e) => Utils.$stopPropagation(e)"

PC 上滑動結束後觸發了click事件

問題分析

首先我們滑動是利用 pointerdown, pointermove, pointerup 三個事件組合形成的，但是 pointerup 執行之後， click 是一定會執行的，是無法避免的，是無法用preventDefault , stopPropagation , stopImmediatePropagation 阻止的, 因為pointer 事件和 click 事件本身就不是一個系列的，因此沒有關係，所以當發生滑動之後，pointerup 一定會執行，click 也會在 pointerup 執行後執行

解決方案

我們設置一個全局變數

window.isMoved = false

在 pointermove 事件中，將 window.isMoved 設為 true。然後在 pointerup 事件中，我們用一個定時器讓這個變數在200毫秒之後發生改變為 false，因為 pointerup 之後 click 很快就觸發了，不到200ms，因此可以保證變數還沒有發生變化，click 事件裡面去檢測這個變數，如果是變化之前，那麼不執行

如果 click 事件少還好說，直接複製幾遍無所謂。
但是一般來說 click 事件在項目中使用還是挺多的，有沒有什麼一勞永逸的辦法呢？
大部分監聽 click 事件都是用 Vue 的 @click 添加的，我們無法插手

這時給大家介紹一下 Proxy 這個對象了，Vue3 的雙向綁定就用到了 Proxy 對象。
在項目入口，我們直接代理 HTMLElement.prototype.addEventListener 這個事件，代理了之後，Vue 的 @click 語法糖添加事件時就會通知我們，這時再進行判斷是不是 click 事件，是的話再判斷 window.isMoved 的狀態

window.isMoved = false
HTMLElement.prototype.addEventListener = new Proxy(HTMLElement.prototype.addEventListener, {
  apply(target, ctx, args) {
    const eventName = args[0]
    const listener = args[1]
    if (listener instanceof Function && eventName === 'click') {
      args[1] = new Proxy(listener, {
        apply(target, ctx, args) {
          if (window.isMoved) return
          try {
            return target.apply(ctx, args)
          } catch (e) {
            console.error(`[proxyPlayerEvent][${eventName}]`, listener, e)
          }
        }
      })
    }
    return target.apply(ctx, args)
  }
})

設置了 overflow: auto 的頁面在移動端不觸發 pointermove 事件

再設置一個 touch-action:pan-y 就正常了

CSS 屬性 touch-action 用於設置觸摸屏用戶如何操縱元素的區域 (例如，瀏覽器內置的縮放功能), pan-y 啟用單指垂直平移手勢

總結

核心代碼加上註釋一共217行，我們實現了一個可以在 PC 和 Mobile 上通用，並且可以無限嵌套的輪播組件

結束

以上就是文章的全部內容，感謝看到這裡，希望對你有所幫助或啟發！創作不易，如果覺得文章寫得不錯，可以點贊收藏支持一下，也歡迎關註我的公眾號，我會更新更多實用的前端知識與技巧，期待與你共同成長~


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Oracle資料庫出現WARNING: too many parse errors告警的分析思路
    Oracle資料庫的告警日誌中出WARNING: too many parse errors這些告警信息的話，如果遇到這個問題，我們應該如何分析呢？ 下麵簡單聊一下如何分析這個錯誤。該告警信息其實是12.2版本中的一個特性增強。在以前的Oracle版本中，資料庫出現瞭解析錯誤時，資料庫的alert日 ...
  • 重磅新品發佈！雲耀資料庫HRDS，享受輕量級的極致體驗
    本文分享自華為雲社區《重磅新品發佈！雲耀資料庫HRDS，享受輕量級的極致體驗！》，作者：GaussDB 資料庫。 所謂，凡有井水處，即能歌柳詞。 大數據時代，凡有數據處，必有資料庫。 隨著業務需求的不斷擴大和數據量的激增，資料庫的使用場景滲透到了生活的方方面面，不再是大型企業或技術部門的專利，市場對 ...
  • 玩轉雲端 | 擁有HBlock這項“存儲盤活絕技”，數據中心也能“熱辣瘦身”！
    夏天馬上就要到了，“瘦身”不光是特定人群的需求，也是數據中心的需求。構建輕量化、低碳化、高性價比的新型數據中心，更有效地支撐經濟社會數字化轉型，已成為業界主流趨勢。 如何讓數據中心“熱辣瘦身”？輕量級存儲集群控制器——天翼雲存儲資源盤活系統HBlock必不可少！ “HBlock健身房”究竟是如何發揮 ...
  • 鴻蒙HarmonyOS實戰-ArkUI動畫（頁面轉場動畫）
    前言 頁面轉場動畫是指在應用程式中，當用戶導航到另一個頁面時，使用動畫效果來過渡頁面之間的切換。這樣做的目的是為了提升用戶體驗，使頁面之間的切換更加平滑和有趣。 常見的頁面轉場動畫包括淡入淡出、滑動、翻轉、縮放等效果。通過使用這些動畫效果，可以給用戶一種流暢的感覺，讓頁面之間的切換更加自然。 在 ...
  • 鴻蒙HarmonyOS實戰-ArkUI動畫（放大縮小視圖）
    前言 在HarmonyOS中，可以通過以下方法放大縮小視圖： 使用縮放手勢：可以使用雙指捏合手勢來放大縮小視圖。將兩個手指放在屏幕上，並向內或向外移動手指，即可進行放大或縮小操作。 使用系統提供的縮放控制項：在HarmonyOS的開發中，可以使用系統提供的縮放控制項來實現視圖的放大縮小功能。通過在布 ...
  • 使用 MediaCodec 在 Android 上進行硬解碼
    要使用 MediaCodec 在 Android 上進行硬解碼，並獲取 RGBA 數據，你可以按照以下步驟進行操作： 創建 MediaExtractor 對象並設置要解碼的 MP4 文件路徑： MediaExtractor extractor = new MediaExtractor(); extr ...
  • lodash已死？radash最全使用介紹（附源碼說明）—— Array方法篇（4）
    寫在前面 tips：點贊 + 收藏 = 學會！ 我們已經介紹了radash的相關信息和部分Array相關方法，詳情可前往主頁查看。 本篇我們繼續介紹radash中Array的相關方法的剩餘方法。 本期文章發佈後，作者也會同步整理出Array方法的使用目錄，包括文章說明和腦圖說明。 因為方法較多，後續 ...
  • 面試官：在原生input上面使用v-model和組件上面使用有什麼區別？
    前言 還是上一篇面試官：來說說vue3是怎麼處理內置的v-for、v-model等指令？ 文章的那個粉絲，面試官接著問了他另外一個v-model的問題。 面試官：vue3的v-model都用過吧，來講講。 粉絲：v-model其實就是一個語法糖，在編譯時v-model會被編譯成:modelValue ...
一周排行
    -Advertisement-
    Play Games
  • WPF中輕鬆生成動態圖表：實例詳解(MVVM模式)
    概述：本文代碼示例演示瞭如何在WPF中使用LiveCharts庫創建動態條形圖。通過創建數據模型、ViewModel和在XAML中使用`CartesianChart`控制項，你可以輕鬆實現圖表的數據綁定和動態更新。我將通過清晰的步驟指南包括詳細的中文註釋，幫助你快速理解並應用這一功能。 先上效果： 在 ...
  • .NET 中使用 GaussDB C# ORM
    openGauss(GaussDB ) openGauss是一款全面友好開放，攜手伙伴共同打造的企業級開源關係型資料庫。openGauss採用木蘭寬鬆許可證v2發行，提供面向多核架構的極致性能、全鏈路的業務、數據安全、基於AI的調優和高效運維的能力。openGauss深度融合華為在資料庫領域多年的研 ...
  • .NET中使用 openGauss C# ORM
    openGauss(GaussDB ) openGauss是一款全面友好開放，攜手伙伴共同打造的企業級開源關係型資料庫。openGauss採用木蘭寬鬆許可證v2發行，提供面向多核架構的極致性能、全鏈路的業務、數據安全、基於AI的調優和高效運維的能力。openGauss深度融合華為在資料庫領域多年的研 ...
  • 輕鬆使用Aspire rabbitmq framework
    概述：本示例演示了在WPF應用程式中實現多語言支持的詳細步驟。通過資源字典和數據綁定，以及使用語言管理器類，應用程式能夠在運行時動態切換語言。這種方法使得多語言支持更加靈活，便於維護，同時提供清晰的代碼結構。 在WPF中實現多語言的一種常見方法是使用資源字典和數據綁定。以下是一個詳細的步驟和示例源代 ...
  • .net事件
    描述（做一個簡單的記錄）： 事件（event）的本質是一個委托；（聲明一個事件： public event TestDelegate eventTest;） 委托（delegate）可以理解為一個符合某種簽名的方法類型；比如：TestDelegate委托的返回數據類型為string，參數為 int和 ...
  • .NET CORE 完美支持AOT 的 ORM SqlSugar 教程
    1、AOT適合場景 Aot適合工具類型的項目使用，優點禁止反編 ，第一次啟動快，業務型項目或者反射多的項目不適合用AOT AOT更新記錄: 實實在在經過實踐的AOT ORM 5.1.4.117 +支持AOT 5.1.4.123 +支持CodeFirst和非同步方法 5.1.4.129-preview1 ...
  • 【UWP】修改清單脫離沙盒運行
    總說周知，UWP 是運行在沙盒裡面的，所有許可權都有嚴格限制，和沙盒外交互也需要特殊的通道，所以從根本杜絕了 UWP 毒瘤的存在。但是實際上 UWP 只是一個應用模型，本身是沒有什麼許可權管理的，許可權管理全靠 App Container 沙盒控制，如果我們脫離了這個沙盒，UWP 就會放飛自我了。那麼有沒... ...
  • 《Effective C++》第三版-4. 設計與聲明（Design and Declarations）
    目錄條款17：讓介面容易被正確使用，不易被誤用（Make interfaces easy to use correctly and hard to use incorrectly）限制類型和值規定能做和不能做的事提供行為一致的介面條款19：設計class猶如設計type（Treat class de ...
  • 從零開始：Django項目的創建與配置指南
    title: 從零開始：Django項目的創建與配置指南 date: 2024/5/2 18:29:33 updated: 2024/5/2 18:29:33 categories: 後端開發 tags: Django WebDev Python ORM Security Deployment Op ...
  • mORMot 1.18 第18章 使用REST/JSON的客戶端/伺服器
    1、BOM對象 BOM:Broswer object model,即瀏覽器提供我們開發者在javascript用於操作瀏覽器的對象。 1.1、window對象 視窗方法 // BOM Browser object model 瀏覽器對象模型 // js中最大的一個對象.整個瀏覽器視窗出現的所有東西都 ...
所有分類