vue-seamless-scroll无缝滚动组件

首先找到他的官网vue-seamless-scroll

1.进行安装依赖

vue2

npm install vue-seamless-scroll --save

vue3

npm install vue3-seamless-scroll --save  

2.全局引入

vue2

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

vue3

 import vue3SeamlessScroll from "vue3-seamless-scroll";
  app.use(vue3SeamlessScroll);

局部引入

vue2或vue3

<Scroll></Scroll> 

import Scroll from 'vue-seamless-scroll'     
components: {                                            
        Scroll
}, 

3.看官网组件的使用 ,一个小例子

<vue-seamless-scroll :data="newsList" :class-option="optionLeft" class="seamless-warp2">
     <ul class="item">
            <li v-for="item in newsList" v-text="item.title"></li>
      </ul>
 </vue-seamless-scroll>
data() {
    return {     
      newsList: [{
                   'title': 'A simple, seamless scrolling for Vue.js'
                  },
                  {
                   'title': 'A curated list of awesome things related to Vue.js'
                   }]
    };
  },
computed: {
            optionLeft () {
               return {
                        direction: 2,
                        limitMoveNum: 2
                       }
                }
          },

页面

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2023年【建筑电工(建筑特殊工种)】免费试题及建筑电工(建筑特殊工种)试题及解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年建筑电工(建筑特殊工种)免费试题为正在备考建筑电工(建筑特殊工种)操作证的学员准备的理论考试专题&#xff0c;每个月更新的建筑电工(建筑特殊工种)试题及解析祝您顺利通过建筑电工(建筑特殊工种)考试。 1、【…

不同品牌的手机如何投屏到苹果MacBook?例如小米、华为怎样投屏比较好?

习惯使用apple全家桶的人当然知道苹果手机或iPad可以直接用airplay投屏到MacBook。 但工作和生活的多个场合里&#xff0c;并不是所有人都喜欢用同一品牌的设备&#xff0c;如果同事或同学其他品牌的手机需要投屏到MacBook&#xff0c;有什么方法可以快捷实现&#xff1f; 首先…

第76讲:MySQL数据库中常用的命令行工具的基本使用

文章目录 1.mysql客户端命令工具2.mysqladmin管理数据库的客户端工具3.mysqlbinlog查看数据库中的二进制日志4.mysqlshow统计数据库中的信息5.mysqldump数据库备份工具6.mysqllimport还原备份的数据7.source命令还原SQL类型的备份文件 MySQL数据库提供了很多的命令行工具&#…

Azure Machine Learning - 使用 Azure OpenAI 服务生成图像

在浏览器/Python中使用 Azure OpenAI 生成图像&#xff0c;图像生成 API 根据文本提示创建图像。 关注TechLead&#xff0c;分享AI全维度知识。作者拥有10年互联网服务架构、AI产品研发经验、团队管理经验&#xff0c;同济本复旦硕&#xff0c;复旦机器人智能实验室成员&#x…

掌握JavaScript继承的精髓:原型继承、构造函数继承以及组合继承的实现技巧

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;JavaScript篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来JavaScript篇专栏内容:JavaScript-Javascript如何实现继承&#xff1f; 目录 一、是什么 二、实现方式 …

DataFrame的使用

查看数据类型及属性 # 查看df类型 type(df) # 查看df的shape属性&#xff0c;可以获取DataFrame的行数&#xff0c;列数 df.shape # 查看df的columns属性&#xff0c;获取DataFrame中的列名 df.columns # 查看df的dtypes属性&#xff0c;获取每一列的数据类型 df.dtypes df.i…

Flutter自定义下拉选择框dropDownMenu

利用PopupMenuButton和PopupMenuItem写了个下拉选择框&#xff0c;之所以不采用系统的&#xff0c;是因为自定义的更能适配项目需求&#xff0c;话不多说&#xff0c;直接看效果 下面直接贴出代码、代码中注释写的都很清楚&#xff0c;使用起来应该很方便&#xff0c;如果有任何…

Java开发工具:IDEA 2023.3(WinMac)中文激活版

IntelliJ IDEA 2023是一款由JetBrains公司出品的集成开发环境&#xff08;IDE&#xff09;&#xff0c;专为程序员设计。它以智能、高效和人性化为主要特点&#xff0c;致力于提高开发人员的生产力&#xff0c;帮助程序员更快、更好地编写代码。 在智能功能方面&#xff0c;Int…

51单片机数码管的使用

IO的使用2–数码管 本文主要涉及51单片机的数码管的使用 文章目录 IO的使用2--数码管一、数码管的定义与类型1.1 数码管的原理图二、 举个栗子2.1 一个数码管的底层函数2.2 调用上面的底层函数显示具体数字 一、数码管的定义与类型 数码管是一种用于数字显示的电子元件&#x…

C语言进阶之路之顶峰相见篇

目录 一、学习目标 二、宏定义 预处理 宏的概念 带参宏 无值宏定义 三、条件编译 条件编译 条件编译的使用场景 四、头文件 头文件的作用 头文件的内容 头文件的基础语句&#xff1a; GCC编译器的4个编译步骤&#xff1a; 总结 一、学习目标 掌握宏定义含义和用…

hdlbits系列verilog解答(mt2015_q4b)-53

文章目录 一、问题描述二、verilog源码三、仿真结果一、问题描述 本次我们根据仿真波形图反向设计一个电路。波形如下图: 根据波形,我们可以得到真值表: x y z 0 0 1 0 1 0 1 0 0 1 1 1 逻辑表达式可以写成以下积之和形式: z = (!x&!y) | (x&y); 二、verilog源码…

php使用vue.js实现省市区三级联动

参考gpt 有问题问gpt 实现效果 现省市区三级联动的方法可以使用PHP结合AJAX异步请求来实现。下面是一个简单的示例代码&#xff1a; HTML部分&#xff1a; <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>省市区三级联动…

基础课20——从0-1客服机器人生命周期

温馨提示&#xff1a;篇幅较长&#xff0c;可点击目录查看对应节点。 1.机器人搭建期 搭建机器人包含&#xff1a;素材整理、问题提炼、相似问题补充、答案编辑、问题分配引擎等等步骤&#xff0c;不同厂商可能有所区别&#xff0c;但关键功能的实现离不开以下步骤。 1.1素材…

MA营销自动化如何助力商家实现精准营销?

惟客数据 MAP 是一个跨渠道和设备的自动化营销平台&#xff0c;允许接触点编排个性化旅程&#xff0c;通过短信、社交推送等方式为您的客户创建无缝的个性化体验&#xff0c;加强客户关系并赢得忠诚度。可与惟客数据CDP 产品无缝配合使用&#xff0c;通过数据驱动做出更实时&am…

Qt实现二维码生成和识别

一、简介 QZxing开源库: 生成和识别条码和二维码 下载地址&#xff1a;https://gitcode.com/mirrors/ftylitak/qzxing/tree/master 二、编译与使用 1.下载并解压&#xff0c;解压之后如图所示 2.编译 打开src目录下的QZXing.pro&#xff0c;选择合适的编译器进行编译 最后生…

软件测试:Selenium三大等待(详解版)

一、强制等待 1.设置完等待后不管有没有找到元素&#xff0c;都会执行等待&#xff0c;等待结束后才会执行下一步 2.实例&#xff1a; driver webdriver.Chrome()driver.get("https://www.baidu.com")time.sleep(3) # 设置强制等待driver.quit() 二、隐性等待 …

前端知识(十)———JavaScript 使用URL跳转传递数组对象数据类型的方法

目录 首先了解一下正常传递基本数据类型 JavaScript跳转页面方法 JavaScript路由传递参数 JavaScript路由接收参数传递对象、数组 在前端有的时候会需要用链接进行传递参数&#xff0c;基本数据类型的传递还是比较简单的&#xff0c;但是如果要传递引用数据类型就比较麻烦了…

深入解析PyTorch的DataLoader:参数探秘与使用指南【建议收藏】

引言 当我们深入探索深度学习的世界时&#xff0c;PyTorch作为一个强大且易用的框架&#xff0c;提供了丰富的功能来帮助我们高效地进行模型训练和数据处理。其中&#xff0c;DataLoader是PyTorch中一个非常核心且实用的组件&#xff0c;它负责在模型训练过程中加载和处理数据…

如何利用Axure制作移动端产品原型

Axure是一款专业的快速原型设计工具&#xff0c;作为专业的原型设计工具&#xff0c;Axure 能够快速、高效地创建原型&#xff0c;同时支持多人协作设计和版本控制管理。它已经得到了许多大公司的采用&#xff0c;如IBM、微软、思科、eBay等&#xff0c;这些公司都利用Axure 进…

【Linux】地址空间

本片博客将重点回答三个问题 什么是地址空间&#xff1f; 地址空间是如何设计的&#xff1f; 为什么要有地址空间&#xff1f; 程序地址空间排布图 在32位下&#xff0c;一个进程的地址空间&#xff0c;取值范围是0x0000 0000~ 0xFFFF FFFF 回答三个问题之前我们先来证明地址空…