{"repo":"xfy520/vue3-seamless-scroll","free":true,"listed":false,"github":"https://github.com/xfy520/vue3-seamless-scroll","clone":"git clone https://github.com/xfy520/vue3-seamless-scroll.git","description":"Vue3.0 无缝滚动组件","language":"Vue","stars":372,"topics":["vue","scroll","infinite-scroll","vue3-seamless-scroll","seamless-scroll","vue3"],"license":"MIT","category":"ui-components","readme_excerpt":"vue3-seamless-scroll 全新升级 无缝滚动组件，改为 虚拟列表 的方式渲染，支持 大数据滚动 ，可以分页请求 无限数据滚动 ，更多使用方式看例子 老版本文档 目前组件支持上下左右无缝滚动，单步滚动，并且支持复杂图标的无缝滚动，目前组件支持平台与 Vue3.0 支持平台一致。 安装 - npm - Yarn - browser 组件配置 - list 无缝滚动列表数据。 - visibleCount 满足多少条数据时开启滚动，当每一条数据高度或者宽度一致时组件内会自动计算，否则最好手动指定 - v-model 通过v-model控制动画滚动与停止，默认开始滚动 - direction 控制滚动方向，可选值 up ， down ， left ， right - hover 是否开启鼠标悬停 - step 步进速度 - singleWaitTime 单步停止等待时间(默认值 1000ms) - delay 动画延时时间 - ease 动画效果，可以传入贝塞尔曲线数值 - wheel 在开启鼠标悬停的情况下是否开启滚轮滚动，默认不开启 - singleLine 启用单行横向滚动 组件方法 - add(index, values, cb) 添加数据、可以添加多个 - remove(index, num, cb) 删除数据 - update(index, value, cb) 更新数据 - reset() 重置组件状态，如外层盒子大小改变时需调用该方法重置 事件 - offset(bufferSize, targetList) 当缓存数据更新时触发该事件，可以用以做分页更新滚动数据，可以看 无限数据滚动例子 - count(count) 当滚动完一个周期时触发该事件 注意项 需要滚动的列表所在容器必须设置样式 overflow: hidden ; 使用 注册组件 - 全局组件注册 install - 单个.vue文件局部注册 使用组件 html {{ data.name }} {{ data.name }} {{ data.name }} import { defineComponent, ref } from \"vue\"; import { Vue3SeamlessScroll,VerticalScroll,HorizontalScroll } from \"vue3-seamless-scroll\"; const listData = Array.from({ length: 10000 }, ( , i) = ({ id: Date.now() + i + 1, name: Vue3.0无缝滚动展示数据第${i + 1}条 , })); export default defineComponent({ name: \"App\", components: { Vue3SeamlessScroll, VerticalScroll, HorizontalScroll }, setup() { const list = ref(listData); return { list, } }, }); .vertical-scoll { overflow: hidden; height: 300px; } .horizonta-scoll { overflow: hidden; height: 300px; } .vertical-text { height: 300px; writing-mode: vertical-lr; text-orienta","default_branch":null,"files":null,"tree":[],"storefront":"/r/xfy520","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/xfy520/vue3-seamless-scroll/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}