效果圖
實現思路
主要分界面與邏輯兩大塊
界面分為5個部分
- 左滑塊長度
- 左內容位置
- 中間長度
- 右滑塊長度
- 右內容位置
邏輯
- touch3個事件
- 各滑塊長度及位置計算
- 選中時變色
具體實現步驟
首先我們明白整個容器的長度是不變的等於左邊+中間+右邊所以我們可以通過先獲取總的容器的寬度並用變量進行保存,這裡我用的就是屏幕的寬度。
添加vue的三種touch事件。
使用類綁定的方式，在touchStart事件觸發的方式，修改點擊的滑塊的樣式，在鬆開時觸發touchend事件，恢復原來的樣式。
滑動時三大塊核心寬度及位置的計算，因為滑動中座標軸是實時變化，這裡我們使用vue的計算屬性進行操作。
滑動事件中，界面變化及左右兩邊滑動距離的記錄。
文本內容通過計算值便可實現。
核心代碼就這些了，撒花完結，優化什麼的，你們自己看著來咯。
有不明白的地方可以私信小編:"web"
分享到:
閱讀更多 WEB前端交流 的文章
