国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

干貨--手把手擼vue移動UI框架：側邊菜單

bergwhite / 2996人閱讀

摘要：最后提醒下，代碼中使用而非的原因是為了啟動移動端手機的動畫加速，提升動畫流暢度。

前言

最近面試發現很多前端程序員都從來沒有寫過插件的經驗，基本上都是網上百度。所以打算寫一系列文章，手把手的教一些沒有寫過組件的兄弟們如何去寫插件。本系列文章都基于VUE，核心內容都一樣，會了之后大家可以快速的改寫成react、angular或者是小程序等組件。這篇文章是第一篇，寫的是一個類似QQ的側邊菜單組件。

效果展示

先讓大家看個效果展示，知道咱們要做的東西是個怎么樣的樣子，圖片有點模糊，大家先將就點：

開始制作 DOM結構

整體結構中應該存在兩個容器：1. 菜單容器 2. 主頁面容器；因此當前DOM結構如下：

為了使得菜單內容和主題內容能夠定制，我們再給兩個容器中加入兩個slot插槽：默認插槽中放置主體內容、菜單放置到menu插槽內：

css樣式

我項目中使用了scss,代碼如下:

此時我們就得到了兩個絕對定位的容器

javascript

現在開始正式的代碼編寫了，首先我們理清下交互邏輯：

手指左右滑動的時候主體容器和菜單容器都跟著手指運動運動

當手指移動的距離超過菜單容器寬度的時候頁面不能繼續向右滑動

當手指向左移動使得菜單和頁面的移動距離歸零的時候頁面不能繼續向左移動

當手指釋放離開屏幕的時候，頁面滑動如果超過一定的距離（整個菜單寬度的比例）則打開整個菜單，如果小于一定距離則關閉菜單

所以現在咱們需要在使用組件的時候能夠入參定制菜單寬度以及觸發菜單收起關閉的臨界值和菜單寬度的比例，同時需要給主體容器添加touch事件，最后我們給菜單容器和主體容器添加各自添加一個控制他們運動的style,通過控制這個style來控制容器的移動
寫在最后

第一次寫這樣的干貨，寫的不好請見諒，如果大家覺得有用，給個賞錢喝杯茶唄，讓我后續更有動力寫完所有移動端常用的UI組件的文章（誰能教教我怎么在把這兩個贊助碼縮小啊，尷尬）

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93241.html

相關文章

  • 干貨--手把手擼vue移動UI框架：滑動輪播

    摘要：其次父組件中負責通用的功能，以及輪播的整體架構，其結構如下。下面的是一種移動端的適配方案。接下來實現函數運用動畫切換到指定下標的子項到此為止，咱們就已經完成了一個初步的滑動切換輪播圖的功能了。 前言 昨天寫了一篇側邊菜單組件的文章，閱讀人數挺多的，內心很欣喜（偷著樂，第一篇文章有這么多人看）！乘著這股勁，今天在繼續寫一篇我們平時工作中更常用的滑動輪播組件的文章。 效果展示 老規矩，咱們...

    MSchumi 評論0 收藏0

  • 干貨--手把手擼vue移動UI框架： 滑動加載

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

    Harpsichord1207 評論0 收藏0

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

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

    MkkHou 評論0 收藏0

發表評論

0條評論

bergwhite

男|高級講師

TA的文章

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