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

資訊專欄INFORMATION COLUMN

干貨--手把手?jǐn)]vue移動UI框架： 滑動加載

Harpsichord1207 / 1878人閱讀

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

前言

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

效果展示

先上一個gif圖片展示我們做成后的效果，如下：

DOM結(jié)構(gòu)

頁面應(yīng)該包含三個部分：1. 正文區(qū)域 2.加載小菊花以及記載文字 3.所有數(shù)據(jù)加載完成后的文字：


  

    
  

  
    

      
      {{loadingText}}
    

  
  
    
{{complateText}}
css樣式

整個組件的容器r-scroll應(yīng)該是固定寬度，超出部分可以滾動的；正文區(qū)域應(yīng)該是隨著內(nèi)容，高度自動增長的；加載小菊花在滾動距離底部默認(rèn)數(shù)值的時候顯示；所有數(shù)據(jù)加載完成后顯示數(shù)據(jù)加載完成文字：

javascript

交互邏輯分析：

頁面初始化的時候，獲取整個組件節(jié)點以及正文容器節(jié)點

對整個容器節(jié)點進(jìn)行綁定scroll事件

容器進(jìn)行滾動的過程中判斷是否距離頂部小于指定數(shù)值，如果小于則觸發(fā)自定義事件loadmore

業(yè)務(wù)代碼中監(jiān)聽loadmore事件，如果觸發(fā)則加載數(shù)據(jù)

因為代碼不復(fù)雜，故不詳細(xì)解析，大家看下代碼注釋，如有不清楚的請在評論中發(fā)表評論：

另外該組件中引用到了loading小菊花組件，附錄一個小菊花組件代碼，因代碼簡單故不詳細(xì)解析：

菊花使用的是一張gif圖片，請照一張你喜歡的菊花gif放在該菊花組件的路徑下
寫在最后

最后這里附錄一個使用例子吧：

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

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

相關(guān)文章

  • 干貨--手把手擼vue移動UI框架： 滑動刪除

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

    MkkHou 評論0 收藏0

  • 干貨--手把手擼vue移動UI框架： 滑動刪除

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

    trigkit4 評論0 收藏0

  • 干貨--手把手擼vue移動UI框架： 滑動刪除

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

    王軍 評論0 收藏0

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

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

    bergwhite 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<