這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 移動端 H5 Tab 如何滾動居中 Tab 在 PC 端、移動端應用都上很常見，不過 Tab 在移動端 比 PC 端更複雜。為什麼呢？移動端設備屏幕較窄，一般僅能展示 4 ~ 7 個 Item。考慮到用戶體驗，UI 往往要求程式員實現一個 ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
移動端 H5 Tab 如何滾動居中
Tab 在 PC 端、移動端應用都上很常見，不過 Tab 在移動端 比 PC 端更複雜。為什麼呢？移動端設備屏幕較窄，一般僅能展示 4 ~ 7 個 Item。考慮到用戶體驗，UI 往往要求程式員實現一個功能——點擊 Item 後，Item 滾動到屏幕中央，拼多多的 Tab 就實現了這個功能。
如果你也想實現這個功能，看了這篇文章，你一定會有所收穫。我會先說明 Tab 滾動的本質，分析出滾動距離的計算公式，接著給出偽代碼，最後再給出 Vue、React 和微信小程式的示例代碼。
Tab 滾動的本質
Tab 滾動，本質是包裹著 Item 的容器在滾動。
如下圖，豎著的虛線長方形代表手機屏幕，橫著的長方形代表 Tab 的容器，標著數字的小正方形代表一個個 Tab Item。
左半部分中，Tab 容器緊貼手機屏幕左側。右半部分中，Item 4 位於屏幕中央，兩部分表示 Item 4 從屏幕右邊滾動到屏幕中央。
不難看出，Item 4 滾動居中，其實就是容器向左移動 distance。此時容器滾動條到容器左邊緣的距離也是 distance。
換句話說，讓容器向左移動 distance，Item 4 就能居中。 因此只要我們能找出計算 distance 的公式，就能控制某個 Item 居中。
計算 distance 的公式
該如何計算 distance 呢？我們看下方這張更細緻的示意圖。
屏幕中央有一條線，它把 Item 4 分成了左右等寬的兩部分，也把手機屏幕分成了左右等寬的兩部分。你可以把 Item 4 一半的寬度記為 halfItemWidth，把手機屏幕一半的寬度記為 halfScreenWidth。再把 Item 4 左側到容器左側的距離記為 itemOffsetLeft。
不難看出，這四個值滿足如下等式：
distance + halfScreenWidth = itemOffsetLeft + halfItemWidth簡單推導一下，就得到了計算 distance 的公式。
distance = itemOffsetLeft + halfItemWidth - halfScreenWidth
公式的偽代碼實現
現在開始解釋公式的代碼實現。
先看下 itemOffsetLeft、halfItemWidth 和 halfScreenWidth 如何獲取。
-
itemOffsetLeft是 Item 元素到容器左側的距離，你可以用 HTMLElement.offsetLeft 作它的值。 -
halfItemWidth是 Item 元素一半的寬度。HTMLElement.offsetWidth 是元素的整體寬度，你可以用offsetWidth / 2作它的值，也可以先用 Element.getBoundingClientRect() 獲取一個itemRect對象，再用itemRect.width / 2作它的值。 -
halfScreenWidth是手機屏幕一半的寬度。 window.innerWidth 是手機屏幕的整體寬度，你可以用innerWidth / 2作它的值。
再看下如何把 distance 設置到容器上。
在 HTML 中，我們可以使用 Element.scrollLeft 來讀取和設置元素滾動條到元素左邊的位置。因此，你只需要容器的 scrollLeft 賦值為 distance，就可以實現 Item 元素滾動居中。
現在給出點擊 tab 的函數的偽代碼：
const onClick = () => {
const itemOffsetLeft = item.offsetLeft;
const halfItemWidth = item.offsetWidth / 2;
const halfScreenWidth = window.innerWidth / 2;
tabContainer.scrollLeft = itemOffsetLeft + halfItemWidth - halfScreenWidth
}
代碼示例
Vue
React
微信小程式
小程式的 API 和瀏覽器的 API 有差異。
itemOffsetLeft，你需要從點擊事件的event.currentTarget中獲取。halfItemWidth，你需要先用wx.createSelectorQuery()選取到 Item 後，從exec()的執行結果中獲取到 Item 整體寬度，然後再除以 2。halfScreenWidth，你需要先用wx.getSystemInfoSync()獲取屏幕整體寬度，然後再除以 2。
至於把 distance 設置到容器上，微信小程式 scroll-view 組件中，有 scroll-left 這個屬性，你可以把 distance 賦值給 scroll-left。
本文轉載於:
https://juejin.cn/post/7322730720732921867
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
