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