成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

vue無縫滾動的插件開發(fā)填坑分享

岳光 / 1236人閱讀

摘要：寫插件的初衷項目經(jīng)常需要無縫滾動效果，當時寫的時候用用這個老插件，相對不上很好用。后來轉(zhuǎn)向在沒有找到好的無縫滾動插件，除了配置可以實現(xiàn)但是相對來說太重了，于是自己造了個輪子。

寫插件的初衷 
1.項目經(jīng)常需要無縫滾動效果，當時寫jq的時候用用msClass這個老插件，相對不上很好用。
2.后來轉(zhuǎn)向vue在vue-awesome沒有找到好的無縫滾動插件，除了配置swiper可以實現(xiàn)但是相對來說太重了，于是自己造了個輪子。


3.在這分享下，當時寫這個插件的坑,自己也復習下，如果代碼上有瑕疵歡迎指出。
源碼參考 vue-seamless-scroll 1.簡單的實現(xiàn)上下滾動基本版(最初版) 
html

1.solt提供默認插槽位來放置父組件傳入的html

javascript

1.animationFrame 動畫api兼容處理

2.arrayEqual 判斷數(shù)組是否相等 來監(jiān)聽data的變化來實現(xiàn)更新無縫滾動


1.1 優(yōu)化1: 新增配置openWatch 是否開啟data監(jiān)控實時刷新

有興趣可以看本次commit記錄 myClass.vue的更改

1.2 優(yōu)化2： 新增配置singleHeight waitTime參數(shù) 控制是否單步滾動

commit記錄

1.3  優(yōu)化3：添加對移動端touch事件滾動列表支持

commit記錄

1.4  優(yōu)化4： 去掉了emit回調(diào)(簡化初始化)

//原本組件調(diào)用

//簡化后組件調(diào)用



用js的來復制一份innerHtml來代替之前的做法簡化使用
//this.$emit("copyData")

 timer = setTimeout(() => { //20ms延遲 作用保證能取到最新的html
   this.copyHtml = this.$refs.slotList.innerHTML
 }, 20)
 // template
 


commit記錄

1.5  bug1： 解決ie9下animationFrame報錯的bug

這個問題的原因查了比較久最后發(fā)現(xiàn)是當時沒有加return沒有取到定時器id

1.6   優(yōu)化5：添加左右無縫滾動

類似上下可以查看commit

1.7 Vue.use() 提供install全局注冊

import vueMyCLass from "./components/myClass.vue"

let myScroll

const defaultComponentName = "vue-seamless-scroll"

// expose component to global scope
if (typeof window !== "undefined" && window.Vue) {
  Vue.component("vue-seamless-scroll", vueMyCLass)
} else {
  myScroll = {
    install: function (Vue, options = {}) {
      Vue.component(options.componentName || defaultComponentName, vueMyCLass)
    }
  }

}

export default myScroll

1.8 bug 解決了touchMove頻繁快速操作導致單步滾動失效bug  和部分代碼優(yōu)化

//1.封裝多次調(diào)用的取消動畫方法


_cancle: function _cancle() {
     cancelAnimationFrame(this.reqFrame || "");
    },


//2.touchMove頻繁快速操作導致滾動錯亂bug


 _move () {
    this._cancle() //進入move立即先清除動畫 防止頻繁touchMove導致多動畫同時進行
    }    


//3.生命周期結(jié)束前取消動畫


 beforeDestroy () {
      this._cancle()
}


//4.修復不傳參數(shù)報警告的bug


 props: {
      data: {
        type: Array,
        default: () => {
          return []
        }
      },
      classOption: {
        type: Object,
        default: () => {
          return {}
        }
      }
    }


//5.Fixing a bug. add a overflow:hidden on the child element


部分人喜歡用margin-top如果沒有overflow等限制會導致我里面計算高度和實際有些許差距導致最后效果到臨界位置有輕微抖動
//默認加上了overflow: "hidden"


computed: {
      float () {
        return this.options.direction > 1 ? {float: "left", overflow: "hidden"} : {overflow: "hidden"}
      },
      pos () {
        return {
          transform: `translate(${this.xPos}px,${this.yPos}px)`,
          transition: `all ease-in ${this.delay}ms`,
          overflow: "hidden"
        }
      }
}


//6.新增單步滾動也能hover停止的功能


之前因為單步滾動內(nèi)置了延遲執(zhí)行this._move()默認單步限制了鼠標懸停停止無縫滾動,后來通過給this._move()加上開關(guān)達到效果。


commit

TKS

如果對原生js實現(xiàn)類似的無縫滾動有興趣可以留言，我抽空也可以寫下seamless-scroll


vue-seamless-scroll發(fā)現(xiàn)bug或者有什么不足望指點,感覺不錯點個star吧。
           
               
                                           
                       
                 

            
                     
             
               

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

                 
                   
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/92826.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    基于vue的無縫滾動組件
    
                                                     
    摘要：在上一直沒有發(fā)現(xiàn)的無縫滾動組件，在工作之余寫了個組件，分享出來希望大家一起學習進步。

vue-seamless-scroll
A simple, Seamless scrolling for Vue.js
在awesome上一直沒有發(fā)現(xiàn)vue的無縫滾動組件，在工作之余寫了個組件，分享出來希望大家一起學習進步。
showImg(https://segmentfault.com/img/b...
    
                                                   
                          
    
                                
    
                                    jerryloveemily
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    前端常用插件、工具類庫匯總（下）
    
                                                     
    摘要：上一篇前端常用插件工具類庫匯總上內(nèi)容摘要動畫庫滾動庫輪播圖滾屏彈出框消息通知下拉框級聯(lián)選擇器顏色選擇器時間日期處理表單驗證分頁插件本篇延續(xù)上一篇的內(nèi)容繼續(xù)給大家?guī)硪幌盗嘘P(guān)于前端插件工具類的內(nèi)容。

showImg(https://segmentfault.com/img/bVbjsMh?w=900&h=383);
前言
對本文感興趣可以先加個收藏，也可以轉(zhuǎn)發(fā)分享給身邊的小伙伴，以后遇到...
    
                                                   
                          
    
                                
    
                                    ideaa
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    vue-swiper 基于Vue2.0開發(fā) 輕量、高性能輪播插件
    
                                                     
    vue-swiper

基于 Vue2.0 開發(fā)，基本滿足大部分功能
輕量、高性能輪播插件。目前支持 無縫銜接自動輪播、無限輪播、手勢輪播
沒有引入第三方庫，原生 js 封裝,打包之后只有 8.2KB 大小 性能還是杠杠滴

demo
showImg(https://segmentfault.com/img/remote/1460000012630045?w=280&h=280);
? 覺得好用給...
    
                                                   
                          
    
                                
    
                                    idealcn
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    原生js寫一個無縫輪播圖插件(支持vue)
    
                                                     
    摘要：輪播圖插件前言寫這個插件的原因前段時間準備用加上網(wǎng)易云的接口，模擬網(wǎng)易云音樂移動端。目前主要實現(xiàn)了無縫輪播，自動播放，端左右按鈕點擊切換，移動端手勢滑動切換。

輪播圖插件(Broadcast.js)
前言：寫這個插件的原因

前段時間準備用vue加上網(wǎng)易云的nodejs接口，模擬網(wǎng)易云音樂移動端。因為想自己寫一遍所有的代碼以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...
    
                                                   
                          
    
                                
    
                                    MSchumi
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           

           

              
 
                

                    
                    
岳光

                    
男|高級講師

                    
                    

                          
TA的文章

                          閱讀更多
                    

                      
                


                   
              
  

                  
最新活動
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    












<