資訊專欄INFORMATION COLUMN
摘要：最后提醒下，代碼中使用而非的原因是為了啟動(dòng)移動(dòng)端手機(jī)的動(dòng)畫(huà)加速，提升動(dòng)畫(huà)流暢度。
前言
最近面試發(fā)現(xiàn)很多前端程序員都從來(lái)沒(méi)有寫(xiě)過(guò)插件的經(jīng)驗(yàn)，基本上都是網(wǎng)上百度。所以打算寫(xiě)一系列文章，手把手的教一些沒(méi)有寫(xiě)過(guò)組件的兄弟們?nèi)绾稳?xiě)插件。本系列文章都基于VUE，核心內(nèi)容都一樣，會(huì)了之后大家可以快速的改寫(xiě)成react、angular或者是小程序等組件。這篇文章是第一篇，寫(xiě)的是一個(gè)類似QQ的側(cè)邊菜單組件。
效果展示先讓大家看個(gè)效果展示，知道咱們要做的東西是個(gè)怎么樣的樣子，圖片有點(diǎn)模糊，大家先將就點(diǎn)：
整體結(jié)構(gòu)中應(yīng)該存在兩個(gè)容器：1. 菜單容器 2. 主頁(yè)面容器；因此當(dāng)前DOM結(jié)構(gòu)如下：
為了使得菜單內(nèi)容和主題內(nèi)容能夠定制，我們?cè)俳o兩個(gè)容器中加入兩個(gè)slot插槽：默認(rèn)插槽中放置主體內(nèi)容、菜單放置到menu插槽內(nèi)：
css樣式
我項(xiàng)目中使用了scss,代碼如下:
此時(shí)我們就得到了兩個(gè)絕對(duì)定位的容器
javascript現(xiàn)在開(kāi)始正式的代碼編寫(xiě)了，首先我們理清下交互邏輯：
手指左右滑動(dòng)的時(shí)候主體容器和菜單容器都跟著手指運(yùn)動(dòng)運(yùn)動(dòng)
當(dāng)手指移動(dòng)的距離超過(guò)菜單容器寬度的時(shí)候頁(yè)面不能繼續(xù)向右滑動(dòng)
當(dāng)手指向左移動(dòng)使得菜單和頁(yè)面的移動(dòng)距離歸零的時(shí)候頁(yè)面不能繼續(xù)向左移動(dòng)
當(dāng)手指釋放離開(kāi)屏幕的時(shí)候，頁(yè)面滑動(dòng)如果超過(guò)一定的距離（整個(gè)菜單寬度的比例）則打開(kāi)整個(gè)菜單，如果小于一定距離則關(guān)閉菜單
所以現(xiàn)在咱們需要在使用組件的時(shí)候能夠入?yún)⒍ㄖ撇藛螌挾纫约坝|發(fā)菜單收起關(guān)閉的臨界值和菜單寬度的比例，同時(shí)需要給主體容器添加touch事件，最后我們給菜單容器和主體容器添加各自添加一個(gè)控制他們運(yùn)動(dòng)的style,通過(guò)控制這個(gè)style來(lái)控制容器的移動(dòng)
寫(xiě)在最后
第一次寫(xiě)這樣的干貨，寫(xiě)的不好請(qǐng)見(jiàn)諒，如果大家覺(jué)得有用，給個(gè)賞錢喝杯茶唄，讓我后續(xù)更有動(dòng)力寫(xiě)完所有移動(dòng)端常用的UI組件的文章（誰(shuí)能教教我怎么在把這兩個(gè)贊助碼縮小啊，尷尬）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93241.html
摘要：其次父組件中負(fù)責(zé)通用的功能，以及輪播的整體架構(gòu)，其結(jié)構(gòu)如下。下面的是一種移動(dòng)端的適配方案。接下來(lái)實(shí)現(xiàn)函數(shù)運(yùn)用動(dòng)畫(huà)切換到指定下標(biāo)的子項(xiàng)到此為止，咱們就已經(jīng)完成了一個(gè)初步的滑動(dòng)切換輪播圖的功能了。 前言 昨天寫(xiě)了一篇側(cè)邊菜單組件的文章，閱讀人數(shù)挺多的，內(nèi)心很欣喜（偷著樂(lè)，第一篇文章有這么多人看）！乘著這股勁，今天在繼續(xù)寫(xiě)一篇我們平時(shí)工作中更常用的滑動(dòng)輪播組件的文章。 效果展示 老規(guī)矩，咱們...
摘要：前言在我們移動(dòng)端還有一個(gè)很常用的組件，那就是滑動(dòng)加載更多組件。平常我們看到的很多插件實(shí)現(xiàn)相當(dāng)復(fù)雜就覺(jué)得這個(gè)組件很難，其實(shí)不是的這個(gè)組件其實(shí)可以很簡(jiǎn)單的就實(shí)現(xiàn)出來(lái)，而且體驗(yàn)也能非常的棒當(dāng)然我們沒(méi)有實(shí)現(xiàn)下拉刷新功能下面我們就一起來(lái)實(shí)現(xiàn)這個(gè)組件。 前言 在我們移動(dòng)端還有一個(gè)很常用的組件，那就是滑動(dòng)加載更多組件。平常我們看到的很多插件實(shí)現(xiàn)相當(dāng)復(fù)雜就覺(jué)得這個(gè)組件很難，其實(shí)不是的?。∵@個(gè)組件其實(shí)可...
摘要：的結(jié)構(gòu)如下樣式我們這里讓正文占據(jù)視圖的，然后按鈕容器靠右絕對(duì)定位，然后再把向右移動(dòng)，這樣就剛好銜接在后面。當(dāng)向左滑動(dòng)的時(shí)候，向左移動(dòng)，顯示出來(lái)。 前言 前幾天因?yàn)轫?xiàng)目需要，用jquery寫(xiě)了一個(gè)swiperOut組件，然后我就隨便把這個(gè)組件翻譯成基于Vue的了，有興趣的朋友可以看下。Github源碼（不麻煩的話幫忙start，請(qǐng)各位大爺賞個(gè)星星） demo展示 效果展示 老規(guī)矩，先上效...
閱讀 3581·2023-04-26 02:10
閱讀 1343·2021-11-22 15:25
閱讀 1684·2021-09-22 10:02
閱讀 920·2021-09-06 15:02
閱讀 3480·2019-08-30 15:55
閱讀 613·2019-08-30 13:58
閱讀 2789·2019-08-30 12:53
閱讀 3068·2019-08-29 12:38
