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