摘要:背景前不久遇到一個需求,列表頁實(shí)現(xiàn)左滑刪除功能。首先對下文有關(guān)滑塊的指代標(biāo)識做出統(tǒng)一規(guī)定體驗(yàn)了一下手原生滑動功能,在此之前對于滑塊的具體動效提出了幾個問題。最終效果組件源碼后話同事反饋沒有給滑動開始或完成時暴露一個自定義事件的接口。。
背景
前不久遇到一個需求,h5列表頁實(shí)現(xiàn)左滑刪除功能。
首先對下文有關(guān)滑塊的指代標(biāo)識做出統(tǒng)一規(guī)定
體驗(yàn)了一下手Q原生滑動功能,在此之前對于滑塊的具體動效提出了幾個問題。(希望大家也去觀察體驗(yàn)一下,網(wǎng)上很多現(xiàn)成的代碼都存在效果上的差異)
控制單條li滑動還是控制li中內(nèi)容塊滑動
是否允許多條內(nèi)容塊同時展開
當(dāng)列表上下滑動時,內(nèi)容塊是否需要收起
在觀察原生滑動功能后,對上述問題做出如下解答
控制li中內(nèi)容塊滑動,通過設(shè)置層級關(guān)系使得初始狀態(tài)時按鈕租處于內(nèi)容塊之下
否
是
實(shí)現(xiàn) dom與css/* html結(jié)構(gòu) */
得到如下圖的列表
等我有空再細(xì)說好了 =-=大家去看源碼吧。
最終效果:
https://github.com/yvonnevv/S...
后話:
同事反饋沒有給滑動開始或完成時暴露一個自定義事件的接口。。
恩,會進(jìn)行迭代的(°ˊдˋ°)°°
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/49999.html
摘要:背景前不久遇到一個需求,列表頁實(shí)現(xiàn)左滑刪除功能。首先對下文有關(guān)滑塊的指代標(biāo)識做出統(tǒng)一規(guī)定體驗(yàn)了一下手原生滑動功能,在此之前對于滑塊的具體動效提出了幾個問題。最終效果組件源碼后話同事反饋沒有給滑動開始或完成時暴露一個自定義事件的接口。。 背景 前不久遇到一個需求,h5列表頁實(shí)現(xiàn)左滑刪除功能。 首先對下文有關(guān)滑塊的指代標(biāo)識做出統(tǒng)一規(guī)定 showImg(https://segmentfa...
摘要:背景前不久遇到一個需求,列表頁實(shí)現(xiàn)左滑刪除功能。首先對下文有關(guān)滑塊的指代標(biāo)識做出統(tǒng)一規(guī)定體驗(yàn)了一下手原生滑動功能,在此之前對于滑塊的具體動效提出了幾個問題。最終效果組件源碼后話同事反饋沒有給滑動開始或完成時暴露一個自定義事件的接口。。 背景 前不久遇到一個需求,h5列表頁實(shí)現(xiàn)左滑刪除功能。 首先對下文有關(guān)滑塊的指代標(biāo)識做出統(tǒng)一規(guī)定 showImg(https://segmentfa...
摘要:而列表項(xiàng)要包括內(nèi)容和刪除按鈕,內(nèi)容寬度為屏幕寬度,而刪除按鈕定位到右邊,所以整個列表項(xiàng)寬度是超過的。來判斷當(dāng)前是左滑還是右滑,左滑時在減小,而右滑時變大。并且記錄下當(dāng)前滑動的是第幾項(xiàng)。 最近做了一個類似系統(tǒng)操作的左滑刪除的demo,用的taro框架,和大家分享一下~首先需要考慮的有以下幾點(diǎn):1)布局;2)判斷是左滑還是右滑,左滑時出現(xiàn)刪除,右滑時回歸原位;3)排他性,意思是某一個時間只...
閱讀 1243·2023-04-26 02:46
閱讀 697·2023-04-25 19:38
閱讀 705·2021-10-14 09:42
閱讀 1310·2021-09-08 09:36
閱讀 1423·2019-08-30 15:44
閱讀 1382·2019-08-29 17:23
閱讀 2303·2019-08-29 15:27
閱讀 864·2019-08-29 14:15