成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

干貨--手把手?jǐn)]vue移動(dòng)UI框架： 滑動(dòng)刪除

MkkHou / 1780人閱讀

摘要：的結(jié)構(gòu)如下樣式我們這里讓正文占據(jù)視圖的，然后按鈕容器靠右絕對(duì)定位，然后再把向右移動(dòng)，這樣就剛好銜接在后面。當(dāng)向左滑動(dòng)的時(shí)候，向左移動(dòng)，顯示出來。

前言

前幾天因?yàn)轫?xiàng)目需要，用jquery寫了一個(gè)swiperOut組件，然后我就隨便把這個(gè)組件翻譯成基于Vue的了，有興趣的朋友可以看下。Github源碼（不麻煩的話幫忙start，請(qǐng)各位大爺賞個(gè)星星） demo展示

效果展示

老規(guī)矩，先上效果，效果不是很好，大家如果有什么生成gif的好用的軟件可以推薦下：

開始制作 DOM結(jié)構(gòu)

分析效果途中的結(jié)構(gòu)，我們可以得出每一項(xiàng)可滑動(dòng)刪除的節(jié)點(diǎn)的結(jié)構(gòu)包含如下兩部分：

正文部分，顯示咱們的主內(nèi)容

滑動(dòng)出來的部分（如：刪除按鈕）

  •

    • 因?yàn)槭褂胹wiperOut的情景一般都是列表，所以，這里我們用li標(biāo)簽；在實(shí)際使用情況中，咱們的content和btns兩個(gè)容器中的內(nèi)容是經(jīng)常會(huì)自定義的，所以在這里咱們使用兩個(gè)插槽slot接受用戶的自定義：

  • 
  
    
    
  
    
  
    
    
      
    刪除

    • 這個(gè)是咱們每一項(xiàng)的DOM結(jié)構(gòu)，接下來，咱們還需要把這個(gè)列表放到一個(gè)UL容器中去，我們把UL父容器叫做swiperOut，子列表項(xiàng)li叫做swiperOutItem。swiperOut的DOM結(jié)構(gòu)如下：
    css樣式

    swiperOutItem:

    我們這里讓正文content占據(jù)視圖的100%，然后按鈕容器btns靠右絕對(duì)定位，然后再把btns向右移動(dòng)100%，這樣btns就剛好銜接在content后面。當(dāng)向左滑動(dòng)的時(shí)候，item向左移動(dòng)，btns顯示出來。父容器swiperOut的樣式如下:

    javascript

    該交互的具體邏輯如下：

    自容器向左滑動(dòng)，容器跟著移動(dòng)

    如果有已經(jīng)處于打開狀態(tài)的子項(xiàng)，需要把這個(gè)已經(jīng)打開的子項(xiàng)關(guān)閉

    當(dāng)手指釋放的時(shí)候，判斷移動(dòng)距離是否超過閥值

    如果超過閥值，則運(yùn)用動(dòng)畫，把btns完全顯示出來

    如果沒有，則運(yùn)用動(dòng)畫返回初始狀態(tài)

    首先當(dāng)子項(xiàng)初始化的時(shí)候我們應(yīng)該獲取btns的寬度，因?yàn)檫@個(gè)寬度決定了我們向左最多能滑動(dòng)多少

    接下來，咱們應(yīng)該給item綁定一個(gè)樣式對(duì)象，用來動(dòng)態(tài)控制，子項(xiàng)滑動(dòng)的距離：

    接下來給content綁定滑動(dòng)事件：

    接下來完善，touchstart函數(shù)：

    記錄手指開始滑動(dòng)的坐標(biāo)

    將動(dòng)畫執(zhí)行事件設(shè)置成零

    記錄當(dāng)前item的X軸坐標(biāo)

    完善我們的核心函數(shù)touchmove函數(shù)，邏輯如下：

    獲取手指橫向移動(dòng)距離moveX以及縱向距離moveY

    判斷手指是橫向滑動(dòng)還是縱向滑動(dòng)，如果是橫向滑動(dòng)才移動(dòng)容器，否則假設(shè)用戶在滾動(dòng)列表

    判定用戶在橫向滑動(dòng)，計(jì)算出item當(dāng)前在X軸應(yīng)該滑動(dòng)的距離

    當(dāng)手指離開屏幕，觸發(fā)touchend的時(shí)候：

    判定當(dāng)前滑動(dòng)總距離是否超過閥值

    超過閥值，顯示btns，否則重置item的移動(dòng)

    給item一個(gè)動(dòng)畫，關(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ā)滑動(dòng)的時(shí)候，咱們觸發(fā)父組件中的一個(gè)事件，把自組件本身傳遞給父組件；父組件記錄當(dāng)前活動(dòng)的組件，如果之前活動(dòng)的組件和當(dāng)前活動(dòng)的組件不是同一個(gè)子項(xiàng)，那么調(diào)用子組件自己的重置函數(shù)，關(guān)閉上一個(gè)活動(dòng)子項(xiàng)，然后根據(jù)之前的邏輯移動(dòng)現(xiàn)在咱們手指觸摸的這個(gè)組件。代碼如下：
    swiperOutItem:

    請(qǐng)注意，在touchmove中咱們?cè)黾恿艘痪浯a：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:

    咱們?cè)谶@一小節(jié)中只寫了各個(gè)事件的處理函數(shù)，但是在DOM中綁定事件的代碼沒有寫出來大家在跟著寫代碼的時(shí)候，千萬不要忘了在DOM中綁定事件哦！！，整理最終代碼如下：
    swiperOut:

    swiperOutItem:
    寫在最后

    最近好像懶勁犯了，好久都沒有更新博客了，謹(jǐn)記謹(jǐn)記?。。?！對(duì)了，還有就是如果大家對(duì)我寫的文章有不懂的，或者說希望我怎么寫的更通俗易懂的，可以在評(píng)論里面評(píng)論我！爭取以后的寫的更能讓大家懂我實(shí)現(xiàn)的思路。

    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/54534.html

    相關(guān)文章

    • 干貨--手把手擼vue移動(dòng)UI框架： 滑動(dòng)刪除

      摘要：的結(jié)構(gòu)如下樣式我們這里讓正文占據(jù)視圖的，然后按鈕容器靠右絕對(duì)定位，然后再把向右移動(dòng)，這樣就剛好銜接在后面。當(dāng)向左滑動(dòng)的時(shí)候，向左移動(dòng)，顯示出來。 前言 前幾天因?yàn)轫?xiàng)目需要，用jquery寫了一個(gè)swiperOut組件，然后我就隨便把這個(gè)組件翻譯成基于Vue的了，有興趣的朋友可以看下。Github源碼（不麻煩的話幫忙start，請(qǐng)各位大爺賞個(gè)星星） demo展示 效果展示 老規(guī)矩，先上效...

      trigkit4 評(píng)論0 收藏0

    • 干貨--手把手擼vue移動(dòng)UI框架： 滑動(dòng)刪除

      摘要：的結(jié)構(gòu)如下樣式我們這里讓正文占據(jù)視圖的，然后按鈕容器靠右絕對(duì)定位，然后再把向右移動(dòng)，這樣就剛好銜接在后面。當(dāng)向左滑動(dòng)的時(shí)候，向左移動(dòng)，顯示出來。 前言 前幾天因?yàn)轫?xiàng)目需要，用jquery寫了一個(gè)swiperOut組件，然后我就隨便把這個(gè)組件翻譯成基于Vue的了，有興趣的朋友可以看下。Github源碼（不麻煩的話幫忙start，請(qǐng)各位大爺賞個(gè)星星） demo展示 效果展示 老規(guī)矩，先上效...

      王軍 評(píng)論0 收藏0

    • 干貨--手把手擼vue移動(dòng)UI框架： 滑動(dòng)加載

      摘要：前言在我們移動(dòng)端還有一個(gè)很常用的組件，那就是滑動(dòng)加載更多組件。平常我們看到的很多插件實(shí)現(xiàn)相當(dāng)復(fù)雜就覺得這個(gè)組件很難，其實(shí)不是的這個(gè)組件其實(shí)可以很簡單的就實(shí)現(xiàn)出來，而且體驗(yàn)也能非常的棒當(dāng)然我們沒有實(shí)現(xiàn)下拉刷新功能下面我們就一起來實(shí)現(xiàn)這個(gè)組件。 前言 在我們移動(dòng)端還有一個(gè)很常用的組件，那就是滑動(dòng)加載更多組件。平常我們看到的很多插件實(shí)現(xiàn)相當(dāng)復(fù)雜就覺得這個(gè)組件很難，其實(shí)不是的！！這個(gè)組件其實(shí)可...

      Harpsichord1207 評(píng)論0 收藏0

    • 干貨--手把手擼vue移動(dòng)UI框架：側(cè)邊菜單

      摘要：最后提醒下，代碼中使用而非的原因是為了啟動(dòng)移動(dòng)端手機(jī)的動(dòng)畫加速，提升動(dòng)畫流暢度。 前言 最近面試發(fā)現(xiàn)很多前端程序員都從來沒有寫過插件的經(jīng)驗(yàn)，基本上都是網(wǎng)上百度。所以打算寫一系列文章，手把手的教一些沒有寫過組件的兄弟們?nèi)绾稳懖寮１鞠盗形恼露蓟赩UE，核心內(nèi)容都一樣，會(huì)了之后大家可以快速的改寫成react、angular或者是小程序等組件。這篇文章是第一篇，寫的是一個(gè)類似QQ的側(cè)邊菜...

      bergwhite 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <