slider組件與swiper組件不同，slider滑動時并不翻頁，實現(xiàn)的是左滑時，顯示右側(cè)內(nèi)容的功能

站在用戶的角度思考問題，與客戶深入溝通，找到鎮(zhèn)雄網(wǎng)站設(shè)計與鎮(zhèn)雄網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名與空間、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋鎮(zhèn)雄地區(qū)。

1、主要思路

思路和swiper組件類似，主要的也就是對三個觸摸事件的處理：touchstart、touchmove、touchend

在touchstart事件處理程序中記錄一些初始值，比如原始坐標(biāo)，偏移距離；在touchmove事件處理程序中計算實時滑動的距離，讓元素隨之一起偏移，與swiper不同的是，slider在左滑之前，不能右滑，以及滑動時，右側(cè)元素的寬度要同步變化；在touchend事件處理程序中計算最終的滑動距離，左滑且大于闕值則滑動固定值，右滑或小于闕值則回到起始位置，右側(cè)元素的寬度要同步變化。

slider組件可以接收三個參數(shù)：

rightWidth： 右側(cè)滑出寬度的百分比

isClickBack： 點擊是否收起右側(cè)

isMainSlide： 左側(cè)是否滑動（false則覆蓋左側(cè)）

2、代碼實現(xiàn)

頁面結(jié)構(gòu)：有兩個slot來展示左右兩邊的內(nèi)容

名稱欄目：Vue左滑組件slider使用詳解-創(chuàng)新互聯(lián)
標(biāo)題來源：http://weahome.cn/article/dpjdhh.html