xfy520/vue3-seamless-scroll

Vue3.0 无缝滚动组件

vue3-seamless-scroll's Issues

singleWaitTime无法生效

您好，我这边使用您的库，按照简介去使用的组建库，但是使用singleWaitTime无法生效，下面是我的代码,可以帮我看下是那里使用错误吗

 <Vue3SeamlessScroll
            :list="currentErrorInfo"
            :singleHeight="21"
            :singleWaitTime="3000"
            :step="0.5"
          >
            <ul class="swiper-container">
              <li
                class="single-content"
                v-for="(item, index) in currentErrorInfo"
                :key="index"
              >
                <span class="content-id">{{ item?.vehicleId }}</span>
                <span :class="['content-code', handleLevelClass(item?.level)]"
                  >[{{ item?.code }}]</span
                >
                <span class="content-sg">{{ item?.msg }}</span>
              </li>
            </ul>
          </Vue3SeamlessScroll>

鼠标悬浮停止后，加入手动滚动。

大大好，您的这个插件很方便好用，只是产品想要鼠标悬浮滚动停止后还能鼠标滑轮滚动。目前没有想到什么思路去再加入手动滚动。想请教下，能否在使用您的插件的情况下，再去实现这个功能。如果不行的话，之后只能参考您的源码在封装一个组件了。

绑定事件无效

给列表的每个dom元素绑定点击事件，只有第一次循环才生效。比如一个世界国家列表，第一次见到“**”时点击事件生效，当一直滚动下去，之后看见的“**”就不生效了

没有找到声明文件

找不到相关声明，是因为现在还没有支持ts吗？

异步请求来的数据无法滚动啊

构建报错TypeError: Cannot read properties of undefined (reading 'cancelAnimationFrame')

vue版本 3.2.47
执行构建后报错build error:
TypeError: Cannot read properties of undefined (reading 'cancelAnimationFrame')

在内容未撑满高度时，也有滚动

复制github的代码

部分低端机型会报错：globalThis is not define

用了vue3-seamless-scroll 之后，部分手机报了错误：globalThis is not define，如果没猜错的话，应该是兼容没做好
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) : typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) : (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Vue3SeamlessScroll = {}, global.Vue)); })
这个问题希望能解决一下。
PS：另外说一下我的解决办法，我是直接在html头部加了 js 做的兼容：
!(function (t) { function e() { var e = this || self; (e.globalThis = e), delete t.prototype._T_; } "object" != typeof globalThis && (this ? e() : (t.defineProperty(t.prototype, "_T_", { configurable: !0, get: e, }), _T_)); })(Object)

感谢作者的付出，插件挺好用的。赞！

list传入的数据没有全部识别，只识别了几个，随着子盒子高度变化，识别内容在减少

Vue3+ts+vue-class-component中使用报错：Uncaught TypeError: Cannot read properties of null (reading 'offsetHeight')

完全使用的示例代码，运行不滚动且控制台报错Uncaught TypeError: Cannot read properties of null (reading 'offsetHeight')

另还有警告信息Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function.

如果我列表的高度不一致，能否在传入list的时候分别设置步进的高度

如果我列表的高度不一致，能否在传入list的时候分别设置步进的高度

08 - switch控制切换

我仔细看了文档，没发现有这块，请问开发者这个原来的功能还有嘛？感谢开源

如何在滚动表单上面加个表头啊？

滚动表单的效果挺好的，但是没有表头挺遗憾的，自己在vue3-seamless-scroll外面加了个div表头，但是跟表格里面相应的内容对不齐，希望能更新个有表头的

为什么 从最后一项回到第一项的时候, 视觉效果是快速回滚到第一项.

你好请教一下.
direction为 up
lsit 的 length 为 4,
limitScrollNum 值为 list 的 length - 1
效果是 滚动到最后一项,再次开始滚动的时候, 页面从最后一项回滚到第一项.

我觉得这个效果比较迷惑. 是不是我设置的不对呢?

太吃性能

请教一下nuxt3项目应该怎么引入？

我试了下yarn add
只是在组件里import了一下，项目就报错了
应该怎么设置呢？

delay

滚动不是连续的

中间出现间断

list数据变化后无法重新渲染

list变化后，default插槽数据也有变化，但是组件视图没有渲染。getHtml()函数 是否应该仔list变化后重新执行

新增数据后, 比如数据从1-5个 添加到6个, 滚动会到第五个卡顿 跳一下

新增数据后, 比如数据从1-5个 添加到6个, 滚动会到第五个卡顿 跳一下, 这个如何解决呀, 目前加了copynum, 也是会有跳一下, 现在是加了个 定时器, 5分钟数据不变,就刷新一下组件. 还有其他方法么?

怎么获取到容器的一条数据做样式处理呢

请问一下, 没有每次动画执行的 prop 么?

没看到设置每次执行动画的时间, 我刚刚去看了下源码, 发现 动画延迟时间和动画执行时间是一样的.

问下适配问题, 用了组件后页面加载不出来, 是在现场的一些硬件上, 但pc是好使的,有遇到这个问题的么

滚动内容绑定点击事件，点击事件不生效

        <ul class="cont">
          <vue3-seamless-scroll :list="list" class="scroll" :step="0.2" :hover="true">
              <li class="cont-li" v-for="item in list" style="white-space: no-wrap; overflow: hidden;text-overflow: ellipsis;word-break: break-all;width: 100%; cursor: pointer;">
                <span style="color: #ffc900; margin-right: 8px;display: inline-block;">{{item.createTime}}</span>
                <span style="white-space: no-wrap; overflow: hidden;text-overflow: ellipsis; display: inline-block;width: 160px;white-space: nowrap;">{{item.eventSourceName || item.eventRemark}}</span>
                <a style="float: right;margin-right: 5px;color: #00dfff; text-decoration: underline;" @click="handleClick(item)">详情</a>
              </li>
          </vue3-seamless-scroll>
        </ul>

有一定量的元素handleClick不生效，:hover属性也是

[error] update from 1.1.5 to 1.2.0

我的项目以前安装的是 1.1.5 版本的，今天项目打包的时候自动更新到了 1.2.0，出现了滚动区域渲染失败的情况。

页面区域空白，控制台报了一连串 Vue 的 warning。

具体问题我暂时没时间去看，直接切回 1.1.5 版本并锁定之后，就正常了。

最后，感谢作者的项目让我提高了搬砖的效率。

copyNum失效

当copyNum设置为动态的时候，copyNum在某个时刻设置的数据不生效

Vue3 Element Plus Table 无法获取正确高度

没到最后一行就跳过轮播了。

代码参考：
https://wenku.baidu.com/view/f886cc11084c2e3f5727a5e9856a561252d32191.html

高度如果是动态的，好像就有问题了，内部也没有暴露reset方法

报错，app.use is not a functon

vue3-seamless-scroll.es.js line 567

内存溢出 导致页面四分钟崩溃亏

内存溢出 导致页面四分钟崩溃

mouse hover flash

鼠标放上去会有残影

添加V-model

提个小建议使用 V-model控制是否开始滚动
这样场景能够更加多变

安装不了，yarn也试了，在VBEN的群中知道的该项目； 我现在也是在VBEN中使用，用不了

动画问题

滚动不平滑，没有vue2版本的平滑，一卡一卡的

内存泄漏, 直接把内存干炸了

1s 一百多兆飙升

bug

开启hover鼠标滚轮滚动时，且页面中有滚动条，在组件内容区滚动应该优先滚动组件内容区，而不是优先滚动页面

横向滚动开启滚轮滚动样式错乱

横向滚动在开启鼠标悬停的情况下，开启滚轮滚动，结果并不是横向滚动，而是纵向滚动，且内容为空白

opentouch

想在移动端开启滚动的时候可以滑动屏幕，之前的openTouch属性没了吗？

求支持opentouch

移动端需要支持左右滑动 能否支持以下谢谢楼主

滚动到最后一个，如何停止，不让他重新滚动到第一条

Failed to fetch dynamically imported module

vite3+vue3

支持鼠标滚动的时候，能否增加滚动条显示

vue3+ts项目中全局注册提示缺少参数options

如图，查看index.d.ts文件，发现有一个options对象，里面有个name属性，请问是用来干嘛的？文档里好像没写明用途。
`declare module 'vue3-seamless-scroll' {
export const Vue3SeamlessScroll: import('vue').DefineComponent < OptionsType, OptionsType, OptionsType, OptionsType, OptionsType,
OptionsType, OptionsType, OptionsType, OptionsType, OptionsType, OptionsType, OptionsType >

const install: (app: import('vue').App, options: {
name?: string
}) => unknown;
export default install;
}`

不能在vue3 setup 中直接引入吗

... <script lang="ts" setup> import Vue3SeamlessScroll from 'vue3-seamless-scroll' 这样会报错： app.use is not a function

作者。这个如果我有3条数据 设置了大于等于4条才会滚动, 但是页面上显示了6条 ，有没有什么办法 如果我的数据没有大于4条，页面是显示当前有的3条，谢谢

鼠标移入向下滚动，会出现空白，移出鼠标，自动滚动再也不会从0开始

最新版本2.0.1在安卓设备上出现了卡顿现象！！！

@xfy520 在这种设备上可能有性能影响？
设备情况：
android11
chrome内核80+

现场视频：

20230606_120150.1.mp4

左右滚动的时候好像有点问题

对应组件的代码如下，图片都是同一张

<script setup lang="ts">
import util from '@/common/utils/util'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'

let data = [
  util.getImg('icon.svg'),
  util.getImg('icon.svg'),
  util.getImg('icon.svg'),
  util.getImg('icon.svg'),
  util.getImg('icon.svg'),
  util.getImg('icon.svg'),
]
</script>
<template>
  <div>
    <div class="knight-scroll">
      <vue3-seamless-scroll :list="data" direction="left">
        <span
          ><img v-for="(item, index) in data" :src="item" :key="index" /> </span
      ></vue3-seamless-scroll>
    </div>
  </div>
</template>
<style scoped lang="scss">
.knight-scroll {
  background-color: black;
  overflow: hidden;
  width: 100%;
}

img {
  margin-left: 50px;
}
</style>

出来的效果是这样的，是不是我哪里设置错了

这样确实会滚动，但是和我想的差别有点大哈哈

滚动失效

页面加载时，vue3-seamless-scroll组件的数据在setup中已经被赋予新的值了，但是有了新值后vue3-seamless-scroll组件的可见性是不可见的（使用v-show来控制可见性），需要等页面其他数据或组件都准备好后，才能设置vue3-seamless-scroll组件的可见性为可见，在这种情况下，滚动会失效