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

資訊專欄INFORMATION COLUMN

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

岳光 / 1137人閱讀

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

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


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

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

javascript

1.animationFrame 動(dòng)畫api兼容處理

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

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

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

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

commit記錄

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

commit記錄

1.4 優(yōu)化4： 去掉了emit回調(diào)(簡(jiǎn)化初始化) 
//原本組件調(diào)用

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

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

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

commit記錄

1.5 bug1： 解決ie9下animationFrame報(bào)錯(cuò)的bug

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

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

類似上下可以查看commit

1.7 Vue.use() 提供install全局注冊(cè) 
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頻繁快速操作導(dǎo)致單步滾動(dòng)失效bug 和部分代碼優(yōu)化

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

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

//2.touchMove頻繁快速操作導(dǎo)致滾動(dòng)錯(cuò)亂bug

 _move () {
    this._cancle() //進(jìn)入move立即先清除動(dòng)畫 防止頻繁touchMove導(dǎo)致多動(dòng)畫同時(shí)進(jìn)行
    }

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

 beforeDestroy () {
      this._cancle()
}

//4.修復(fù)不傳參數(shù)報(bào)警告的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等限制會(huì)導(dǎo)致我里面計(jì)算高度和實(shí)際有些許差距導(dǎo)致最后效果到臨界位置有輕微抖動(dòng)
//默認(rèn)加上了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.新增單步滾動(dòng)也能hover停止的功能

之前因?yàn)閱尾綕L動(dòng)內(nèi)置了延遲執(zhí)行this._move()默認(rèn)單步限制了鼠標(biāo)懸停停止無縫滾動(dòng),后來通過給this._move()加上開關(guān)達(dá)到效果。

commit

TKS

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

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

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

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

相關(guān)文章

  • 基于vue的無縫滾動(dòng)組件

    摘要：在上一直沒有發(fā)現(xiàn)的無縫滾動(dòng)組件，在工作之余寫了個(gè)組件，分享出來希望大家一起學(xué)習(xí)進(jìn)步。 vue-seamless-scroll A simple, Seamless scrolling for Vue.js 在awesome上一直沒有發(fā)現(xiàn)vue的無縫滾動(dòng)組件，在工作之余寫了個(gè)組件，分享出來希望大家一起學(xué)習(xí)進(jìn)步。 showImg(https://segmentfault.com/img/b...

    jerryloveemily 評(píng)論0 收藏0

  • 前端常用插件、工具類庫(kù)匯總（下）

    摘要：上一篇前端常用插件工具類庫(kù)匯總上內(nèi)容摘要?jiǎng)赢嫀?kù)滾動(dòng)庫(kù)輪播圖滾屏彈出框消息通知下拉框級(jí)聯(lián)選擇器顏色選擇器時(shí)間日期處理表單驗(yàn)證分頁(yè)插件本篇延續(xù)上一篇的內(nèi)容繼續(xù)給大家?guī)硪幌盗嘘P(guān)于前端插件工具類的內(nèi)容。 showImg(https://segmentfault.com/img/bVbjsMh?w=900&h=383); 前言 對(duì)本文感興趣可以先加個(gè)收藏，也可以轉(zhuǎn)發(fā)分享給身邊的小伙伴，以后遇到...

    ideaa 評(píng)論0 收藏0

  • vue-swiper 基于Vue2.0開發(fā) 輕量、高性能輪播插件

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

    idealcn 評(píng)論0 收藏0

  • 原生js寫一個(gè)無縫輪播圖插件(支持vue)

    摘要：輪播圖插件前言寫這個(gè)插件的原因前段時(shí)間準(zhǔn)備用加上網(wǎng)易云的接口，模擬網(wǎng)易云音樂移動(dòng)端。目前主要實(shí)現(xiàn)了無縫輪播，自動(dòng)播放，端左右按鈕點(diǎn)擊切換，移動(dòng)端手勢(shì)滑動(dòng)切換。 輪播圖插件(Broadcast.js) 前言：寫這個(gè)插件的原因 前段時(shí)間準(zhǔn)備用vue加上網(wǎng)易云的nodejs接口，模擬網(wǎng)易云音樂移動(dòng)端。因?yàn)橄胱约簩懸槐樗械拇a以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

    MSchumi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<