vue無縫滾動的插件開發填坑分享

岳光發布于2019-08-22 14:04 / 1128人閱讀

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

寫插件的初衷

1.項目經常需要無縫滾動效果，當時寫jq的時候用用msClass這個老插件，相對不上很好用。

2.后來轉向vue在vue-awesome沒有找到好的無縫滾動插件，除了配置swiper可以實現但是相對來說太重了，于是自己造了個輪子。

3.在這分享下，當時寫這個插件的坑,自己也復習下，如果代碼上有瑕疵歡迎指出。

源碼參考 vue-seamless-scroll 1.簡單的實現上下滾動基本版(最初版)

html

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

javascript

1.animationFrame 動畫api兼容處理

2.arrayEqual 判斷數組是否相等來監聽data的變化來實現更新無縫滾動

1.1 優化1: 新增配置openWatch 是否開啟data監控實時刷新

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

1.2 優化2：新增配置singleHeight waitTime參數控制是否單步滾動

commit記錄

1.3 優化3：添加對移動端touch事件滾動列表支持

commit記錄

1.4 優化4：去掉了emit回調(簡化初始化)

//原本組件調用

//簡化后組件調用

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

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

commit記錄

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

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

1.6 優化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 和部分代碼優化

//1.封裝多次調用的取消動畫方法

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

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

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

//3.生命周期結束前取消動畫

 beforeDestroy () {
      this._cancle()
}

//4.修復不傳參數報警告的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停止的功能

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

commit

TKS

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

vue-seamless-scroll發現bug或者有什么不足望指點,感覺不錯點個star吧。

GPU云服務器云服務器無縫滾動水平無縫滾動文字無縫滾動 javascript無縫滾動

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

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

基于vue的無縫滾動組件

摘要：在上一直沒有發現的無縫滾動組件，在工作之余寫了個組件，分享出來希望大家一起學習進步。 vue-seamless-scroll A simple, Seamless scrolling for Vue.js 在awesome上一直沒有發現vue的無縫滾動組件，在工作之余寫了個組件，分享出來希望大家一起學習進步。 showImg(https://segmentfault.com/img/b...

jerryloveemily 2019-08-22 11:20 評論0 收藏0
前端常用插件、工具類庫匯總（下）

摘要：上一篇前端常用插件工具類庫匯總上內容摘要動畫庫滾動庫輪播圖滾屏彈出框消息通知下拉框級聯選擇器顏色選擇器時間日期處理表單驗證分頁插件本篇延續上一篇的內容繼續給大家帶來一系列關于前端插件工具類的內容。 showImg(https://segmentfault.com/img/bVbjsMh?w=900&h=383); 前言對本文感興趣可以先加個收藏，也可以轉發分享給身邊的小伙伴，以后遇到...

ideaa 2019-08-23 13:08 評論0 收藏0
vue-swiper 基于Vue2.0開發輕量、高性能輪播插件

vue-swiper 基于 Vue2.0 開發，基本滿足大部分功能輕量、高性能輪播插件。目前支持無縫銜接自動輪播、無限輪播、手勢輪播沒有引入第三方庫，原生 js 封裝,打包之后只有 8.2KB 大小性能還是杠杠滴 demo showImg(https://segmentfault.com/img/remote/1460000012630045?w=280&h=280); ? 覺得好用給...

idealcn 2019-08-21 18:28 評論0 收藏0
原生js寫一個無縫輪播圖插件(支持vue)

摘要：輪播圖插件前言寫這個插件的原因前段時間準備用加上網易云的接口，模擬網易云音樂移動端。目前主要實現了無縫輪播，自動播放，端左右按鈕點擊切換，移動端手勢滑動切換。輪播圖插件(Broadcast.js) 前言：寫這個插件的原因前段時間準備用vue加上網易云的nodejs接口，模擬網易云音樂移動端。因為想自己寫一遍所有的代碼以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

MSchumi 2019-08-02 16:03 評論0 收藏0