vue實現移動端圓形旋鈕外掛程式

2022-08-27 21:33:35 字數 1864 閱讀 4344

最近公司有乙個專案的需要做出旋鈕的效果，旋鈕有十個檔，根據手指旋轉切換，旋轉時接近最近的檔會有吸附效果，具體效果如下：

html部分**：

<


div 


class


="_touch"


>


<


div 


class


="round_box"


ref="box"


@touchstart


="touchstart"


@touchmove


="touchmove"


>


<


div 


v-if


="able"


style


="position:absolute;width:100%;height:100%;top:0;left:0;"


>


<


div 


class


="round_right"


ref="right"


:style


="">


<


div 


class


="round_info"


>


div>


div>


<


div 


class


="round_num"


>}


div>


div>


div>


div>
less樣式部分**：

._touch }


.round_num }


}
js部分**：

methods: ,


touchmove(e) ,


touchend(e) ,


resetangle(angle) ,,,


,,,,


,,,];


let result = list.filter(function


(currentval, index, arr) );


this.angle = result[0].angle;


this.level = result[0].level;


},getangle(mx, my) 


if (mx == px && my >py) 


if (mx > px && my ==py) 


if (mx < px && my >py) 


if (mx < px && my ==py) 


if (mx < px && my 


this.angle =angle;


this.$nexttick(function


() );


},......
主要的思路是根據監聽 .round_box 元素的 touchmove 事件獲取手指相對於圓心這條直線的旋轉角度（transform : rotate），

並把旋轉角度同步到水平居中於 .round_box 容器，底邊框中心與 .round_box重合的元素 ： .round_right 上，使它相對於

.round_box的圓心旋轉即可。

注：.round_box圓心如下：

注：.round_right 元素如下：

其中 吸附效果的**在getangle中。

移動端日期外掛程式

最近碼 時，遇到移動端日期外掛程式的呼叫，試了好幾種方法，最後選擇mobiscroll期外掛程式，實現在移動端滾動選擇日期 1 使用前，首先需要引入css和js檔案，我使用的是 mobiscroll.custom 2.6.2.min.css mobiscroll.custom 2.6.2.min.j...

Vue實現移動端頁面切換效果

在子頁面把整個頁面做絕對定位，覆蓋整個螢幕，子父頁面將 router view 用 transition 套起來，並加上過渡動畫就可以啦。效果 有乙個問題需要注意一下，我們知道，在應用transform屬性的時候，fixed定位會變成absolute。這裡，頁面轉換的時候，就變成了相對transla...

VUE移動端除錯

首先呢，你的了解一下 browsersync 是個什麼東西，可以移步browsersync官網了解下。然後才是 當我們使用vue cli搭建vue專案的時候，通常使用的都是 webpack 的模板，但是vue一般都是移動端的專案避免不了移動端的除錯，那麼既然是移動端的除錯怎麼能少得了 browser...