資訊專欄INFORMATION COLUMN
摘要：的結構如下樣式我們這里讓正文占據(jù)視圖的，然后按鈕容器靠右絕對定位，然后再把向右移動，這樣就剛好銜接在后面。當向左滑動的時候，向左移動，顯示出來。
前言
前幾天因為項目需要，用jquery寫了一個swiperOut組件，然后我就隨便把這個組件翻譯成基于Vue的了，有興趣的朋友可以看下。Github源碼（不麻煩的話幫忙start，請各位大爺賞個星星） demo展示
效果展示老規(guī)矩，先上效果，效果不是很好，大家如果有什么生成gif的好用的軟件可以推薦下：
分析效果途中的結構，我們可以得出每一項可滑動刪除的節(jié)點的結構包含如下兩部分：
正文部分，顯示咱們的主內(nèi)容
滑動出來的部分（如：刪除按鈕）
因為使用swiperOut的情景一般都是列表，所以，這里我們用li標簽；在實際使用情況中，咱們的content和btns兩個容器中的內(nèi)容是經(jīng)常會自定義的，所以在這里咱們使用兩個插槽slot接受用戶的自定義：
這個是咱們每一項的DOM結構，接下來，咱們還需要把這個列表放到一個UL容器中去，我們把UL父容器叫做swiperOut，子列表項li叫做swiperOutItem。swiperOut的DOM結構如下：
swiperOutItem:
我們這里讓正文content占據(jù)視圖的100%，然后按鈕容器btns靠右絕對定位，然后再把btns向右移動100%，這樣btns就剛好銜接在content后面。當向左滑動的時候，item向左移動，btns顯示出來。父容器swiperOut的樣式如下:
javascript該交互的具體邏輯如下：
自容器向左滑動，容器跟著移動
如果有已經(jīng)處于打開狀態(tài)的子項，需要把這個已經(jīng)打開的子項關閉
當手指釋放的時候，判斷移動距離是否超過閥值
如果超過閥值，則運用動畫，把btns完全顯示出來
如果沒有，則運用動畫返回初始狀態(tài)
首先當子項初始化的時候我們應該獲取btns的寬度，因為這個寬度決定了我們向左最多能滑動多少
接下來，咱們應該給item綁定一個樣式對象，用來動態(tài)控制，子項滑動的距離：
接下來給content綁定滑動事件：
接下來完善，touchstart函數(shù)：
記錄手指開始滑動的坐標
將動畫執(zhí)行事件設置成零
記錄當前item的X軸坐標
完善我們的核心函數(shù)touchmove函數(shù)，邏輯如下：
獲取手指橫向移動距離moveX以及縱向距離moveY
判斷手指是橫向滑動還是縱向滑動，如果是橫向滑動才移動容器，否則假設用戶在滾動列表
判定用戶在橫向滑動，計算出item當前在X軸應該滑動的距離
當手指離開屏幕，觸發(fā)touchend的時候：
判定當前滑動總距離是否超過閥值
超過閥值，顯示btns，否則重置item的移動
給item一個動畫，關閉或者打開btns
到目前為止，咱們完成了item本身的交互邏輯，但是下面這個功能咱們目前還沒有實現(xiàn)：
如果有已經(jīng)處于打開狀態(tài)的子項，需要把這個已經(jīng)打開的子項關閉
那么我們應該怎么實現(xiàn)這個功能呢，我的初步設想是：
當用戶觸發(fā)滑動的時候，咱們觸發(fā)父組件中的一個事件，把自組件本身傳遞給父組件；父組件記錄當前活動的組件，如果之前活動的組件和當前活動的組件不是同一個子項，那么調用子組件自己的重置函數(shù)，關閉上一個活動子項，然后根據(jù)之前的邏輯移動現(xiàn)在咱們手指觸摸的這個組件。代碼如下：
swiperOutItem:
請注意，在touchmove中咱們增加了一句代碼：this.$parent.$emit("changeActiveItem", this)
swiperOut:
到此為止，咱們這個組件基本上已經(jīng)完成了，但是還有一個問題，就是咱們應該怎么去刪除我們的子項呢？這里咱們還是和上面一樣，點擊子項的刪除按鈕，觸發(fā)父組件，然后在父組件中調用removeChild方法刪除子項，具體實現(xiàn)如下：
swiperOut:
swiperOutItem:
咱們在這一小節(jié)中只寫了各個事件的處理函數(shù)，但是在DOM中綁定事件的代碼沒有寫出來大家在跟著寫代碼的時候，千萬不要忘了在DOM中綁定事件哦??！，整理最終代碼如下：
swiperOut:
swiperOutItem:
寫在最后
最近好像懶勁犯了，好久都沒有更新博客了，謹記謹記?。。?！對了，還有就是如果大家對我寫的文章有不懂的，或者說希望我怎么寫的更通俗易懂的，可以在評論里面評論我！爭取以后的寫的更能讓大家懂我實現(xiàn)的思路。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/93698.html
摘要：的結構如下樣式我們這里讓正文占據(jù)視圖的，然后按鈕容器靠右絕對定位，然后再把向右移動，這樣就剛好銜接在后面。當向左滑動的時候，向左移動，顯示出來。 前言 前幾天因為項目需要，用jquery寫了一個swiperOut組件，然后我就隨便把這個組件翻譯成基于Vue的了，有興趣的朋友可以看下。Github源碼（不麻煩的話幫忙start，請各位大爺賞個星星） demo展示 效果展示 老規(guī)矩，先上效...
摘要：的結構如下樣式我們這里讓正文占據(jù)視圖的，然后按鈕容器靠右絕對定位，然后再把向右移動，這樣就剛好銜接在后面。當向左滑動的時候，向左移動，顯示出來。 前言 前幾天因為項目需要，用jquery寫了一個swiperOut組件，然后我就隨便把這個組件翻譯成基于Vue的了，有興趣的朋友可以看下。Github源碼（不麻煩的話幫忙start，請各位大爺賞個星星） demo展示 效果展示 老規(guī)矩，先上效...
摘要：前言在我們移動端還有一個很常用的組件，那就是滑動加載更多組件。平常我們看到的很多插件實現(xiàn)相當復雜就覺得這個組件很難，其實不是的這個組件其實可以很簡單的就實現(xiàn)出來，而且體驗也能非常的棒當然我們沒有實現(xiàn)下拉刷新功能下面我們就一起來實現(xiàn)這個組件。 前言 在我們移動端還有一個很常用的組件，那就是滑動加載更多組件。平常我們看到的很多插件實現(xiàn)相當復雜就覺得這個組件很難，其實不是的??！這個組件其實可...
摘要：最后提醒下，代碼中使用而非的原因是為了啟動移動端手機的動畫加速，提升動畫流暢度。 前言 最近面試發(fā)現(xiàn)很多前端程序員都從來沒有寫過插件的經(jīng)驗，基本上都是網(wǎng)上百度。所以打算寫一系列文章，手把手的教一些沒有寫過組件的兄弟們?nèi)绾稳懖寮?。本系列文章都基于VUE，核心內(nèi)容都一樣，會了之后大家可以快速的改寫成react、angular或者是小程序等組件。這篇文章是第一篇，寫的是一個類似QQ的側邊菜...
閱讀 2579·2021-08-11 11:16
閱讀 2998·2019-08-30 15:55
閱讀 3400·2019-08-30 12:53
閱讀 1641·2019-08-29 13:28
閱讀 3325·2019-08-28 18:17
閱讀 1032·2019-08-26 12:19
閱讀 2520·2019-08-23 18:27
閱讀 771·2019-08-23 18:17
