Vue - 組件開發(fā)和實(shí)例旋轉(zhuǎn)輪盤

shiyang6017 發(fā)布于2019-08-26 13:58 / 2961人閱讀

摘要：請教本來設(shè)想的是通過來傳遞卡片的內(nèi)部結(jié)構(gòu)和數(shù)組數(shù)據(jù)，例如傳遞一個(gè)渲染函數(shù)，通過可以輕松的實(shí)現(xiàn)但是這招行不通。

使用 vue 編寫的一個(gè)可旋轉(zhuǎn)組件，如圖

demo地址： https://github.com/tanf1995/m...

布局

用卡片數(shù)量均分360度圓，使用絕對定位分布在外部容器上，自身通過rotate旋轉(zhuǎn)

       computedCardPosStyle(index){
       let deg = index * this.unitCardDeg;
       let absDeg = Math.abs((deg + this.turnRotate) % 360);
       let z_index = absDeg > 180 ? Math.ceil(absDeg-180): Math.ceil(180-absDeg);

       return {
           width: this.cardWidth + "px",
           height: this.cardHeight + "px",
           top: -Math.cos(deg*Math.PI/180)*this.turntableR + "px",
           left: Math.sin(deg*Math.PI/180)*this.turntableR + "px",
           transform: `translate(-50%, -50%) rotate(${deg}deg)`,
           zIndex: z_index
       }
   },

外部容器定位于瀏覽器窗口之下，露出正上方部分出來

...

圓盤的轉(zhuǎn)動(dòng)

onmousedown、onmouseup 用來判斷鼠標(biāo)是否處于按下狀態(tài)，并且清空上一次拖動(dòng)的數(shù)據(jù)

圓盤的轉(zhuǎn)動(dòng)以橫向滑動(dòng)的總距離更新角度

針對圓盤如何轉(zhuǎn)動(dòng)，設(shè)計(jì)按每一個(gè)小的間隔時(shí)間（如20ms），疊加一次總體滑動(dòng)的距離

handleMouseDown(e){
    e.preventDefault();
    clearInterval(this.UDLMactionTimer);
    this.mouseIsDown = true;
    this.startX = e.clientX || e.touches[0].clientX;
    this.endX = e.clientX || e.touches[0].clientX;
},
handleMouseUp(e){
    e.preventDefault();
    this.mouseIsDown = false;
    clearInterval(this.timer);
    clearInterval(this.UDLMactionTimer);
    this.timer = null;
    this.startX = 0;
    this.endX = 0;
    if(this.lastSpeed) this.UDLMaction();
},
handleMouseMove(e){
    e.preventDefault();
    this.endX = e.clientX || e.touches[0].clientX;
    if(!this.mouseIsDown) return;
    if(!this.timer){
        this.timer = setInterval(() => {
            let moveGap = this.endX - this.startX;

            this.lastSpeed = moveGap/this.timeGap;
            this.xGap += moveGap;
            this.direction = moveGap > 0 ? 1 : -1;
            this.startX = this.endX;
        }, this.timeGap);
    }
},

mounted(){
let container_dom = this.outerWrap ? this.$refs.outerWrap : this.$refs.container;

container_dom.addEventListener("mousedown", this.handleMouseDown.bind(this));
container_dom.addEventListener("mouseup", this.handleMouseUp.bind(this));
container_dom.addEventListener("mouseleave", this.handleMouseUp.bind(this));
container_dom.addEventListener("mousemove", this.handleMouseMove.bind(this));
container_dom.addEventListener("touchstart", this.handleMouseDown.bind(this));
container_dom.addEventListener("touchend", this.handleMouseUp.bind(this));
container_dom.addEventListener("touchcancel", this.handleMouseUp.bind(this));
container_dom.addEventListener("touchmove", this.handleMouseMove.bind(this));

window.addEventListener("resize", this.responseContainerScale.bind(this));
window.addEventListener("load", this.responseContainerScale.bind(this));
},
beforeDestroy(){
    let container_dom = this.outerWrap ? this.$refs.outerWrap : this.$refs.container;

    container_dom.removeEventListener("mousedown", this.handleMouseDown.bind(this));
    container_dom.removeEventListener("mouseup", this.handleMouseUp.bind(this));
    container_dom.removeEventListener("mouseleave", this.handleMouseUp.bind(this));
    container_dom.removeEventListener("mousemove", this.handleMouseMove.bind(this));
    container_dom.removeEventListener("touchstart", this.handleMouseDown.bind(this));
    container_dom.removeEventListener("touchend", this.handleMouseUp.bind(this));
    container_dom.removeEventListener("touchcancel", this.handleMouseUp.bind(this));
    container_dom.removeEventListener("touchmove", this.handleMouseMove.bind(this));

    window.removeEventListener("resize", this.responseContainerScale.bind(this));
}

旋轉(zhuǎn)效果平滑

如果沒有滑動(dòng)慣性，當(dāng)滑動(dòng)完之后，無論滑動(dòng)的時(shí)候速度如何的快，在松開鼠標(biāo)后轉(zhuǎn)盤立刻停下，使得效果非常生硬。所以在滑動(dòng)完成之后，利用最后時(shí)刻的滑動(dòng)速度，讓轉(zhuǎn)盤做勻減速運(yùn)動(dòng)直至速度為0，并且在速度為0時(shí)，在設(shè)計(jì)緩慢細(xì)小的勻速滑動(dòng)，最后呈現(xiàn)出來的效果就比較平滑了。

UDLMaction(){

   let a = -this.reduceSpeed*this.direction;
   this.UDLMactionTimer = setInterval(() => {
       this.lastSpeed = (this.lastSpeed + a)*this.direction >= 0? this.lastSpeed + a: 0;
       this.xGap += (this.lastSpeed) * this.timeGap;
       if(!this.lastSpeed){
           this.moreDynamic();
           return clearInterval(this.UDLMactionTimer);
       }
   }, this.timeGap);

},
moreDynamic(){

   let time = 10;
   let timer = setInterval(() => {
       this.xGap += this.direction*3;
       if(--time <= 0) clearInterval(timer);
   }, 20)

請教

本來設(shè)想的是通過prop來傳遞卡片的內(nèi)部結(jié)構(gòu)和數(shù)組數(shù)據(jù)，例如傳遞一個(gè)渲染函數(shù)，通過react可以輕松的實(shí)現(xiàn),但是vue這招行不通。請問如何能夠做到這點(diǎn)呢？react偽代碼如下

}
>

GPU云服務(wù)器云服務(wù)器 vue組件開發(fā) vuejs組件開發(fā)實(shí)例 vue組件 vue父子組件通訊

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109919.html

發(fā)表評論

登陸后可評論

0條評論

shiyang6017

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 3187·2023-04-25 18:22
基于STM32Cube MX開發(fā)的TencentOS-Tiny軟件包

閱讀 2435·2021-11-17 09:33
【Python爬蟲】4萬字，詳解selenium從入門到實(shí)戰(zhàn)【錯(cuò)過再無】

閱讀 3419·2021-10-11 10:59
我的虛擬主機(jī)怎么解釋-虛擬主機(jī)是什么概念？

閱讀 3265·2021-09-22 15:50
開發(fā)中idea常用快捷鍵集合

閱讀 2859·2021-09-10 10:50
基于Vue的點(diǎn)對點(diǎn)聊天項(xiàng)目

閱讀 885·2019-08-30 15:53
一段程序讓你看懂JS中的this

閱讀 477·2019-08-29 11:21
Vue - 組件開發(fā)和實(shí)例旋轉(zhuǎn)輪盤

閱讀 2962·2019-08-26 13:58

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

Vue - 組件開發(fā)和實(shí)例旋轉(zhuǎn)輪盤

相關(guān)文章

**用vue2.6實(shí)現(xiàn)一個(gè)抖音很火的【時(shí)間輪盤】屏保小DEMO**

Vue+CSS3實(shí)現(xiàn)轉(zhuǎn)盤抽獎(jiǎng)

[phaser3學(xué)習(xí)]使用phaser3做一款飛刀小游戲

**百度地圖開發(fā)實(shí)例番外篇--實(shí)用方法（持續(xù)更新）**

前端知識(shí)歸納

發(fā)表評論

0條評論

shiyang6017

男|高級(jí)講師

TA的文章

tensorflow

基于STM32Cube MX開發(fā)的TencentOS-Tiny軟件包

【Python爬蟲】4萬字，詳解selenium從入門到實(shí)戰(zhàn)【錯(cuò)過再無】

我的虛擬主機(jī)怎么解釋-虛擬主機(jī)是什么概念？

開發(fā)中idea常用快捷鍵集合

基于Vue的點(diǎn)對點(diǎn)聊天項(xiàng)目

一段程序讓你看懂JS中的this