【vue】实现自动轮播+滚轮控制

前言
有一个无缝轮播+滚轮控制的需求,找了很多的方法发现都没办法完美的实现这种效果。
用原生的js实现不是无缝滚动
用无缝滚动插件实现,发现pc端无法实现滚轮控制

目标

1 实现表格表无缝循环滚动
2 实现滚轮控制表格表数据滚动
3 掌握vue-seamless-scroll使用方式

一些思考
如何去完美的实现无缝轮播+滚轮控制效果呢?,查询了很多资料都没有很完美的兼容两者优点的解决方法。推荐最多的方式就是以下两个:
写JS实现,但实现的思路无外乎用定时+scrollTop去实现(若有其他的方案,欢迎留言),这种scrollTop方式必然导致闪动,不是无缝的。
第三方组件vue-seamless-scroll可以完美的实现无缝自动滚动,但是pc端却也无法通过滚轮去控制滚动。

vue-seamless-scroll无缝滚动的很完美,我就在想能不能试着改动或者操作vue-seamless-scroll组件去实现滚轮控制呢。于是开始了以下的尝试

前期工作

1 安装

npm install vue-seamless-scroll --save

2 引入并注册

import VueSeamlessScroll from "vue-seamless-scroll";
export default {name: "SeamleScroll",components: {VueSeamlessScroll,},
}

3 使用组件

<vue-seamless-scroll ref="seamleScroll" class="seamlessScroll" :data="tableData" :class-option="scrollOptions">
// 要滚动的内容
</vue-seamless-scroll>

在开始之前,先看一下这个第三方组件有哪些参数或者属性

官方源代码:vue-seamless-scroll
vue-seamless-scroll文档
configure

key描述默认值类型
step滚动速度1Number
limitMoveNum开始无缝滚动的最小数据量5Number
hoverStop是否开启鼠标悬停stoptrueBoolean
direction方向:0向下 1向上 2向左 3向右1Number
openTouch是否开启移动端触屏trueBoolean
waitTime单步运动停止的时间(默认值1000ms)1000Boolean

基本属性配置

  data() {return {scrollOptions:{step: 1,limitMoveNum: 2, // 开始无缝滚动的最小数据量hoverStop: true, // 是否开启鼠标悬停stopopenTouch: true, direction: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 1000, // 单步运动停止的时间(默认值1000ms)}};},

将基本配置scrollOptions传递给第三方组件vue-seamless-scroll

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/40673.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

江协科技51单片机学习- p21 LED点阵屏(8*8)

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…

2024 年 亚太赛 APMCM (B题)中文赛道国际大学生数学建模挑战赛 |洪水灾害数据分析 | 数学建模完整代码+建模过程全解全析

当大家面临着复杂的数学建模问题时&#xff0c;你是否曾经感到茫然无措&#xff1f;作为2022年美国大学生数学建模比赛的O奖得主&#xff0c;我为大家提供了一套优秀的解题思路&#xff0c;让你轻松应对各种难题&#xff01; 完整内容可以在文章末尾领取&#xff01; 该段文字…

Spring MVC 中使用 RESTFul 编程风格

1. Spring MVC 中使用 RESTFul 编程风格 文章目录 1. Spring MVC 中使用 RESTFul 编程风格2. RESTFul 编程风格2.1 RESTFul 是什么2.2 RESTFul风格与传统方式对比 3. Spring MVC 中使用 RESTFul 编程风格(增删改查)的使用3.1 准备工作3.2 RESTFul 风格的 “查询” 所有&#xf…

git使用遇到的问题记录

文章目录 1. 记录以下问题*error: RPC failed; HTTP 307 curl 22 The requested URL returned error: 307* 1. 记录以下问题 error: RPC failed; HTTP 307 curl 22 The requested URL returned error: 307 第一种&#xff1a;clone的仓库地址或者账户密码发生改变&#xff1b;…

CentOS 7镜像列表服务下线,还想继续使用该怎么办?

目录 问题和解决方法 mirrorlist.centos.org 作用 vault.centos.org 作用 CentOS 7的生命周期已经在2024年6月30日终止&#xff08;End of Life&#xff0c;EOL&#xff09;&#xff0c;官方将不再对该版本进行问题修复、功能更新以及其他形式的维护支持。这意味着使用 Cent…

Websocket通信实战项目(js)(图片互传应用)(下)客户端H5+css+js实现

Rqtz : 个人主页 ​ 共享IT之美&#xff0c;共创机器未来 Sharing the Beauty of IT and Creating the Future of Machines Together 目录 起始 客户端GUI Javascripts连接websocket 使用localStorage保存用户输入的IP Websocket连接成功 Websocket接收数据 解析…

VC++配置Opencv库

VSOpenCVVC超详细的配置教程-CSDN博客 按照以上连接配置&#xff0c;基本上会成功 如果在cv::imshow()时报错&#xff0c;大概率是因为读取的图像为空&#xff0c;先检查图像是否为空 if(img.empty()){cout<<"图像为空"<<endl; } 如果图像为空&#…

MySQL InnoDB Cluster 高可用集群部署

MySQL InnoDB Cluster 简介 官方文档&#xff1a;https://dev.mysql.com/doc/refman/8.4/en/mysql-innodb-cluster-introduction.html 本章介绍 MySQL InnoDB Cluster&#xff0c;它结合了 MySQL 技术&#xff0c;使您能够部署和管理完整的 MySQL 集成高可用性解决方案。 说…

leetcode 162 寻找峰值

直观解法1&#xff1a;遍历 算法复杂度O(n) int findPeakElement(vector<int>& nums) {int size nums.size();//一个元素&#xff0c;直接返回0if(size 1) return 0;//两个元素&#xff0c;返回最大的idxif(size 2) {if(nums[0] > nums[1]) return 0;else re…

科普文:Linux服务器性能调优之CPU调度策略和可调参数

概叙 进程 进程是操作系统虚拟出来的概念&#xff0c;用来组织计算机中的任务。计算机的核心是CPU&#xff0c;它承担了所有的计算任务&#xff1b;而操作系统是计算机的管理者&#xff0c;它负责任务的调度、资源的分配和管理&#xff0c;统领整个计算机硬件&#xff1b;应用…

网络编程:UDP编程笔记

1.字节序的概念和转换 小端格式: 低位字节数据存储在低地址 大端格式: 高位字节数据存储在低地址 在主机上时为小端存储,在网络上时为大端,所以接收到数据时,要转为小端口 如下图: #include <arpa/inet.h> 发送者调用的函数: uint32_t htonl(uint32_t hostlong); //转…

【信息学奥赛】CSP-J/S初赛06 算法基础及时间/空间复杂度等问题

本专栏&#x1f449;CSP-J/S初赛内容主要讲解信息学奥赛的初赛内容&#xff0c;包含计算机基础、初赛常考的C程序和算法以及数据结构&#xff0c;并收集了近年真题以作参考。 如果你想参加信息学奥赛&#xff0c;但之前没有太多C基础&#xff0c;请点击&#x1f449;专栏&#…

软件测试面试题:中间件MQ(消息队列)的优缺点

优点&#xff1a; 解耦性&#xff1a;比如在一个电商平台中&#xff0c;用户下单后&#xff0c;订单系统需要通知库存系统进行扣减。如果直接调用&#xff0c;两个系统就高度耦合。使用MQ&#xff0c;订单系统只需发送一个消息到队列&#xff0c;库存系统订阅这个消息进行处理&…

AI与学术的交响:ChatGPT辅助下的实验设计新篇章

学境思源&#xff0c;一键生成论文初稿&#xff1a; AcademicIdeas - 学境思源AI论文写作 在学术研究中&#xff0c;实验设计是确保研究质量和结果可信度的关键环节。这篇文章我们将为大家介绍如何利用ChatGPT辅助完成学术论文的实验设计&#xff0c;通过提供灵感、优化实验步…

VUE Pinia状态持久化

效果 实现方法 插件&#xff1a;pinia-plugin-persistedstate 链接地址 具体操作 安装 npm i pinia-plugin-persistedstate 添加到 pinia 实例上 import { createPinia } from pinia import piniaPluginPersistedstate from pinia-plugin-persistedstateconst pinia cre…

K8s 集群(kubeadm) CA 证书过期解决方案

Author&#xff1a;Arsen Date&#xff1a;2024/07/04 目录 一、现象描述二、解决方案三、集群验证 一、现象描述 之前有篇文章《K8s Token 过期解决方案&#xff08;Kubeadm&#xff09;》提到了默认生成的 Token 有效期只有 24 小时&#xff0c;过期后 Token 将不可用&#…

B端系统设计风格简洁与高效的完美融合

B端系统设计风格简洁与高效的完美融合

网工内推 | 厂商驻场云运维,最高13k,Base北京

01 华三&#xff08;外包弧聚&#xff09; &#x1f537;招聘岗位&#xff1a;中级桌面云虚拟化驻场工程师 &#x1f537;岗位职责&#xff1a; 1、要熟悉H3C CAS,H3C-worksapce云桌面平台、超融合原理、部署、运维&#xff1b; 2、了解虚拟化平台vmware。 &#x1f537;任职…

CIDEr(Consensus-based Image Description Evaluation)的计算

CIDEr&#xff08;Consensus-based Image Description Evaluation&#xff09; 论文原文 CIDEr: Consensus-based Image Description Evaluation CIDEr&#xff08;Consensus-based Image Description Evaluation&#xff09;是一种用于自动评估图像描述&#xff08;image ca…

基于java语言+ Vue+ElementUI+ MySQL8.0.36数字化产科管理平台源码,妇幼信息化整体解决方案

基于java语言 VueElementUI MySQL8.0.36数字化产科管理平台源码&#xff0c;妇幼信息化整体解决方案 数字化产科管理平台是为医院产科量身定制的信息管理系统。它管理了孕妇从怀孕开始到生产结束42天一系列医院保健服务信息。该系统由门诊系统、住院系统、数据统计模块三部分组…