移動端元件化實踐

vant 是有贊開發的一套基於vue 2.0的mobile元件庫，在開發的過程中也踩了很多坑，今天我們就來聊一聊開發乙個移動端 modal 元件（在有讚該元件被稱為popup）需要注意的一些坑。

在任何乙個合格的ui元件庫中，modal元件應該是必備的元件之一。它一般用於使用者處理事物，但又不希望跳轉頁面時，可以使用modal在當前頁面中開啟乙個浮層，承載對應的操作。相比pc端，移動端的modal元件坑會更多，比如滾動穿透問題就不像pc端在body上新增overflow: hidden那麼簡單。

一、api定義

二、水平垂直居中的方案

三、可惡的滾動穿透

四、position: fixed失效

任何乙個元件開始編碼前都需要首先將api先定義好，才好根據api來提供對應的功能。modal元件提供了以下api：

更具體的 api 介紹可以訪問該鏈結檢視：popup

垂直居中的方案網上谷歌一下就能找到很多種，主流的方案有：

absolute(fixed) + 負邊距

absolute(fixed) + transform

flex

table + vertical-align

首先說一下我們選擇的是第二種：absolute(fixed) + transform，它是以上方案中最簡單最方便的方案，**實現量也很少。實現**如下：

.modal

但是transform會導致乙個巨大的坑，這個坑的具體細節會在下面的章節中詳細講到。

說完了我們選擇的方案，再來說說為啥不選擇其他的方案呢？

absolute(fixed) + 負邊距

只能適合定高的場景，果斷拋棄。如果要實現不定高度就要通過js來計算了，增加了實現的複雜度。

flex

flex布局一是在某些老版本的安卓瀏覽器上還不是很相容，還有就是需要包裹乙個父級才能水平垂直居中。

table + vertical-middle

在css2時代用這個方案來實現垂直居中是比較常見的方案，不足的地方就是**實現量相對較大。

開發過移動端ui元件的都知道，在移動端有個可惡的滾動穿透問題。這個問題可以描述為：在彈窗上滑動會導致下層的頁面跟著滾動。

具體的思路是：當容器可以滑動時，若已經在頂部，禁止下滑；若在底部，禁止上滑；容器無法滾動時，禁止上下滑。實現的方式就是在document上監聽touchstart和touchmove事件，如滑動時，祖先元素並沒有可滑動元素，直接阻止冒泡即可；否則判斷手指滑動的方向，若向下滑動，判斷是否滑動到了滑動元素的底部，若已經到達底部，阻止冒泡，向上滑動也類似。具體的**實現可以看下面的**：

const _ =
require
('src/util'
)export
default
function
(option)
function stopevent (e)
function recordposition (e)
function watchtouchmove (e)
else
if(scrolltop + offsetheight >= scrollheight)
if(status !==
'11'
&& isvertical &&!(
parseint
(status,2)
&parseint
(direction,2)
))return
stopevent
(e)}
document.
addeventlistener
('touchstart'
, recordposition,
false
)  document.
addeventlistener
('touchmove'
, watchtouchmove,
false
)}

在前端工程師的世界觀裡，position: fixed一直是相對瀏覽器視口來定位的。有一天，你在固定定位元素的父元素上應用了transform屬性，當你重新整理瀏覽器想看看最新的頁面效果時，你竟然發現固定定位的元素竟然相對于父元素來定位了。是不是感覺人生觀都崩塌了。

這個問題，目前只在chrome瀏覽器/firefox瀏覽器下有。也有人給chrome提bug：fixed-position element uses transformed ancestor as the container，但至今尚未解決。

例如下面的**：

移動端元件化實踐

移動端自動化實踐

移動端常用元件

javascript元件化實踐

移動端元件化實踐

移動端自動化 實踐

移動端常用元件

javascript元件化實踐

相關推薦

移動端自動化實踐