国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue - 組件開發和實例旋轉輪盤

shiyang6017 / 2908人閱讀

摘要:請教本來設想的是通過來傳遞卡片的內部結構和數組數據,例如傳遞一個渲染函數,通過可以輕松的實現但是這招行不通。

使用 vue 編寫的一個可旋轉組件,如圖

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

布局

用卡片數量均分360度圓,使用絕對定位分布在外部容器上,自身通過rotate旋轉

       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
       }
   },
   

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

   
...

圓盤的轉動

onmousedown、onmouseup 用來判斷鼠標是否處于按下狀態,并且清空上一次拖動的數據

圓盤的轉動以橫向滑動的總距離更新角度

針對圓盤如何轉動,設計按每一個小的間隔時間(如20ms),疊加一次總體滑動的距離

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));
}

旋轉效果平滑

如果沒有滑動慣性,當滑動完之后,無論滑動的時候速度如何的快,在松開鼠標后轉盤立刻停下,使得效果非常生硬。所以在滑動完成之后,利用最后時刻的滑動速度,讓轉盤做勻減速運動直至速度為0,并且在速度為0時,在設計緩慢細小的勻速滑動,最后呈現出來的效果就比較平滑了。

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)

},

請教

本來設想的是通過prop來傳遞卡片的內部結構和數組數據,例如傳遞一個渲染函數,通過react可以輕松的實現,但是vue這招行不通。請問如何能夠做到這點呢?react偽代碼如下

 }
>

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109919.html

相關文章

  • vue2.6實現一個抖音很火的【時間輪盤】屏保小DEMO

    摘要:代碼如下轉動然后通過具體的秒分小時上下午星期日期月值轉動,來控制角度,而且當前值進行文字高亮。 寫在前面:前段時間看抖音,有人用時間輪盤作為動態的桌面壁紙,一時間成為全網最火的電腦屏保,后來小米等運用市場也出現了【時間輪盤】,有點像五行八卦,感覺很好玩,于是突發奇想,自己寫一個網頁版小DEMO玩玩,先看看效果:在線體驗showImg(https://user-gold-cdn.xitu.io...

    wind5o 評論0 收藏0
  • Vue+CSS3實現轉盤抽獎

    摘要:最近有個轉盤抽獎的需求,搜了一下現有的輪子,有的是用的動畫函數實現的,有的是用繪圖然后再用高頻率的調用旋轉方法,前者太老了沒法簡單移植到項目,后者感覺性能表現可能不會太好。核心思路是用以及實現旋轉動畫,使用和繪制出定位較為精確的輪盤獎項。 最近有個轉盤抽獎的需求,搜了一下現有的輪子,有的是用jQuery的動畫函數實現的,有的是用canvas繪圖然后再用高頻率的setTimeout調用旋...

    mj 評論0 收藏0
  • [phaser3學習]使用phaser3做一款飛刀小游戲

    摘要:前言作為一款流行的游戲動畫框架受到很多開發者的青睞最近筆者在逛意大利開發者論壇的時候發現了這款小游戲所以就照著說明做了一下在這里記錄下來開發準備插件腳本飛刀和靶子的圖像或者這個項目里面有的腳本和需要的圖像文件開始制作搭建基本的項目創建一個 前言 phaser作為一款流行的游戲/動畫框架,受到很多web開發者的青睞,最近筆者在逛意大利開發者:emanueleferonato論壇的時候發現...

    BothEyes1993 評論0 收藏0
  • 百度地圖開發實例番外篇--實用方法(持續更新)

    摘要:一前言在使用百度地圖開發的過程中,查閱百度地圖官網基本上就能滿足開發的需求,但是有時候需要設置一些東西,很難在官網上查閱到相關的方法技巧。希望百度地圖能夠越來越強大,這樣開發者就可以愉快的開發了 一 前言 在使用百度地圖開發的過程中,查閱百度地圖官網demo基本上就能滿足開發的需求,但是有時候需要設置一些東西,很難在官網上查閱到相關的方法技巧。筆者特意把開發過程中遇到的一些疑難雜癥和解...

    CocoaChina 評論0 收藏0
  • 前端知識歸納

    摘要:繼承性子標簽會繼承父標簽樣式優先級行內樣式選擇器類選擇器標簽選擇器通配符繼承機制創建了的元素中,在垂直方向上的會發生重疊。 技能考察: 一、關于Html 1、html語義化標簽的理解; 結構化的理解; 能否寫出簡潔的html結構; SEO優化 a、理解:根據內容的結構化(內容語義化),選擇合適的標簽(代碼語義化)便于開發者閱讀和寫出更優雅的代碼的同時 讓瀏覽器的爬蟲和...

    sixleaves 評論0 收藏0

發表評論

0條評論

shiyang6017

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<