vue无缝滚动的插件开发填坑分享

岳光发布于2019-08-22 14:04 / 938人阅读

摘要：写插件的初衷项目经常需要无缝滚动效果，当时写的时候用用这个老插件，相对不上很好用。后来转向在没有找到好的无缝滚动插件，除了配置可以实现但是相对来说太重了，于是自己造了个轮子。

写插件的初衷

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吧。

超融合服务器云服务器无缝滚动水平无缝滚动文字无缝滚动 javascript无缝滚动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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); ? 觉得好用给...

Jaden 2019-08-05 12:42 评论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