vue使用vue-seamless-scroll进行轮播滚动展示内容

我这里只是记录下一些基本的东西,具体大家可以查看官网介绍,有更详细的使用文档(目前有vue和js版本):
https://chenxuan0000.github.io/vue-seamless-scroll/zh/

在这里插入图片描述

安装组件:

npm install vue-seamless-scroll --save

使用
注册组件:

// **main.js**
// 1.全局 install
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)// 或者你可以自己设置全局注册的组件名 默认注册的组件名是 vue-seamless-scroll
Vue.use(scroll,{componentName: 'scroll-seamless'})// 2.单个.vue文件局部注册
<script>import vueSeamlessScroll from 'vue-seamless-scroll'export default {components: {vueSeamlessScroll}}
</script>

使用组件

<template><vue-seamless-scroll :data="listData" class="warp"><ul class="item"><li v-for="(item, index) in listData" :key="index"><span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span></li></ul></vue-seamless-scroll>
</template><script>import vueSeamlessScroll from 'vue-seamless-scroll'export default {name: 'Example01Basic',components: {vueSeamlessScroll},data () {return {listData: [{'title': '无缝滚动第一行无缝滚动第一行','date': '2017-12-16'}, {'title': '无缝滚动第二行无缝滚动第二行','date': '2017-12-16'}, {'title': '无缝滚动第三行无缝滚动第三行','date': '2017-12-16'}, {'title': '无缝滚动第四行无缝滚动第四行','date': '2017-12-16'}, {'title': '无缝滚动第五行无缝滚动第五行','date': '2017-12-16'}, {'title': '无缝滚动第六行无缝滚动第六行','date': '2017-12-16'}, {'title': '无缝滚动第七行无缝滚动第七行','date': '2017-12-16'}, {'title': '无缝滚动第八行无缝滚动第八行','date': '2017-12-16'}, {'title': '无缝滚动第九行无缝滚动第九行','date': '2017-12-16'}],}},}
</script><style lang="scss" scoped>.warp {height: 270px;width: 360px;margin: 0 auto;overflow: hidden;ul {list-style: none;padding: 0;margin: 0 auto;li,a {display: block;height: 30px;line-height: 30px;display: flex;justify-content: space-between;font-size: 15px;}}}
</style>

效果
在这里插入图片描述

一、组件配置项介绍:
data:

  • type: Array
  • required: true

无缝滚动 list 数据。

组件内部只关注 data 数组的 length。

classOption
#step

  • type: Number
  • required: false
  • default:1

数值越大速度滚动越快。

step 值不建议太小,不然会有卡顿效果(如果设置了单步滚动,step 需是单步大小的约数,否则无法保证单步滚动结束的位置是否准确。~~~~~,比如单步设置的 30,step 不能为 4)。

#limitMoveNum

  • type: Number
  • required: false
  • default:5

开启无缝滚动的数据量。

#hoverStop

  • type: Boolean
  • required: false d
  • efault:false

是否启用鼠标 hover 控制。

#direction

  • type: Number
  • required: false
  • default:1

方向: 0 往下 1 往上 2 向左 3 向右。

#openTouch

  • type: Boolean
  • required: false
  • default:true

移动端开启 touch 滑动。

#singleHeight

  • type: Number
  • required: false
  • default:0

单步运动停止的高度(默认值 0 是无缝不停止的滚动),direction 为 0|1 时生效。

#singleWidth

  • type: Number
  • required: false
  • default:0

单步运动停止的宽度(默认值 0 是无缝不停止的滚动),direction 为 2|3 时生效。

#waitTime

  • type: Number
  • required: false
  • default:1000

单步停止等待时间(默认值 1000ms)。

#switchOffset

  • type: Number
  • required: false
  • default:30

左右切换按钮距离左右边界的边距(px)。

#autoPlay

  • type: Boolean
  • required: false
  • default:true

需要实现手动切换左右滚动的时候,必须设置autoPlay:false(1.1.17 版本开始,只需要设置navigation:false),目前不支持环路。

#switchSingleStep

  • type: Number
  • required: false
  • default:134

手动单步切换 step 值(px)。

#switchDelay

  • type: Number
  • required: false
  • default:400

单步切换的动画时间(ms)。

#switchDisabledClass

  • type: String
  • required: false
  • default:disabled

不可以点击状态的 switch 按钮父元素的类名。

#isSingleRemUnit

  • type: Boolean
  • required: false
  • default:false

singleHeight and singleWidth 是否开启 rem 度量。

#navigation

  • type: Boolean
  • required: false
  • default:false

左右方向的滚动是否显示控制器按钮,true 的时候 autoPlay 自动变为 false。

二、回调事件

<template><vue-seamless-scroll :data="listData" @ScrollEnd="ScrollEnd" class="warp"><ul class="item"><li v-for="(item, index) in listData" :key="index"><span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span></li></ul></vue-seamless-scroll>
</template>

ScrollEnd

    ScrollEnd: function(){console.log("ScrollEnd")}

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

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

相关文章

HTML——58.value和placeholder

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>value和placeholder属性</title></head><body><!--input元素的type属性&#xff1a;(必须要有)1.指定输入内容的类型2.默认为text,单行文本框-->&l…

C语言面的向对象编程(OOP)

如果使用过C、C#、Java语言&#xff0c;一定知道面向对象编程&#xff0c;这些语言对面向对象编程的支持是语言级别的。C语言在语言级别不支持面向对象&#xff0c;那可以实现面向对象吗&#xff1f;其实面向对象是一种思想&#xff0c;而不是一种语言&#xff0c;很多初学者很…

使用C#构建一个论文总结AI Agent

前言 我觉得将日常生活中一些简单重复的任务交给AI Agent&#xff0c;是学习构建AI Agent应用一个很不错的开始。本次分享我以日常生活中一个总结论文的简单任务出发进行说明&#xff0c;希望对大家了解AI Agent有所帮助。任务可以是多种多样的&#xff0c;真的帮助自己提升了…

vs 2022 中xml 粘贴为Class 中,序列化出来的xml 的使用

上图是visual studio 2022 中使用的粘贴功能的菜单位置 在生成的xml 中&#xff0c;有些是类似如下类型的 [System.Serializable] [System.Xml.Serialization.XmlType] public class Item {private bool isVisibleField;private bool isVisibleFieldSpecified;[System.Xml.Se…

代际超越:方太冰箱勾勒“蛙跳模型”轮廓

文&#xff1a;互联网江湖 作者&#xff1a;志刚 每一代人&#xff0c;都有其独特的新需求、新创造和新使命。 曾经的手机领域&#xff0c;苹果以其革命性创新颠覆了诺基亚的塞班系统&#xff0c;惊艳了整个行业。而如今&#xff0c;华为凭借其三折叠和自主研发的鸿蒙系统&am…

spring-boot启动源码分析(二)之SpringApplicationRunListener

在上一篇《spring-boot启动源码分析&#xff08;一&#xff09;之SpringApplication实例构造》后&#xff0c;继续看了一个月的Spring boot启动源码&#xff0c;初步把流程看完了&#xff0c;接下来会不断输出总结&#xff0c;以巩固这段时间的学习。同时也希望能帮到同样感兴趣…

Linux-Redis哨兵搭建

环境资源准备 主机名IP端口号角色vm1192.168.64.156379/26379mastervm2192.168.64.166379/26379slavevm3192.168.64.176379/26379slave 6379为redis服务暴露端口号、26379为sentinel暴露端口号。 安装Redis # 包文件下载 wget https://github.com/redis/redis/archive/7.2.2…

MySQL 03 章——基本的SELECT语句

一、SQL概述 &#xff08;1&#xff09;SQL背景知识 SQL&#xff08;Structured Query Language&#xff0c;结构化查询语言&#xff09;是使用关系模型的数据库应用语言&#xff0c;与数据直接打交道不同的数据库管理系统生产厂商都支持SQL语句&#xff0c;但都有特有内容 …

[羊城杯 2024]1z_misc

得到FL4G.zip和天机不可泄露.txt文件&#xff0c;其中压缩包需要解压密码&#xff1a; 二十八星宿&#xff1a; 东方苍龙七宿&#xff1a;角、亢、氐、房、心、尾、箕 南方朱雀七宿&#xff1a;鬼、井、柳、星、张、翼、轸 西方白虎七宿&#xff1a;奎、娄、胃、昴、毕、觜、…

QT----------多媒体

实现思路 多媒体模块功能概述&#xff1a; QT 的多媒体模块提供了丰富的功能&#xff0c;包括音频播放、录制、视频播放和摄像头操作等。 播放音频&#xff1a; 使用 QMediaPlayer 播放完整的音频文件。使用 QSoundEffect 播放简短的音效文件。 录制音频&#xff1a; 使用 QMe…

云计算学习架构篇之HTTP协议、Nginx常用模块与Nginx服务实战

一.HTTP协议讲解 1.1rsync服务重构 bash 部署服务端: 1.安装服务 [rootbackup ~]# yum -y install rsync 2.配置服务 [rootbackup ~]# vim /etc/rsyncd.conf uid rsync gid rsync port 873 fake super yes use chroot no max connections 200 timeout 600 ignore erro…

《Vue3实战教程》42:Vue3TypeScript 与组合式 API

如果您有疑问&#xff0c;请观看视频教程《Vue3实战教程》 TypeScript 与组合式 API​ 这一章假设你已经阅读了搭配 TypeScript 使用 Vue 的概览。 为组件的 props 标注类型​ 使用 <script setup>​ 当使用 <script setup> 时&#xff0c;defineProps() 宏函数支…

Diffusion Transformer(DiT)——将扩散过程中的U-Net换成ViT:近频繁用于视频生成与机器人动作预测(含清华PAD详解)

前言 本文最开始属于此文《视频生成Sora的全面解析&#xff1a;从AI绘画、ViT到ViViT、TECO、DiT、VDT、NaViT等》 但考虑到DiT除了广泛应用于视频生成领域中&#xff0c;在机器人动作预测也被运用的越来越多&#xff0c;加之DiT确实是一个比较大的创新&#xff0c;影响力大&…

2024年12月 Scratch 图形化(二级)真题解析#中国电子学会#全国青少年软件编程等级考试

Scratch图形化等级考试(1~4级)全部真题・点这里 一、单选题(共25题,共50分) 第 1 题 小猫初始位置和方向如下图所示,下面哪个选项能让小猫吃到老鼠?( ) A. B. C.

LLaMA详解

LLaMA 进化史 大规模语言模型(Large Language Model, LLM)的快速发展正在以前所未有的速度推动人工智能(AI)技术的进步。 作为这一领域的先行者, Meta在其LLaMA(Large Language Model Meta AI)系列模型上取得了一系列重大突破。 近日, Meta官方正式宣布推出LLaMA-3, 作为继LL…

SpringMVC(六)拦截器

目录 1.什么是拦截器 2.拦截器和过滤器有哪些区别 3.拦截器方法 4.单个拦截器的执行流程 5.使用拦截器实现用户登录权限验证&#xff08;实例&#xff09; 1.先在html目录下写一个login.html文件 2.在controller包下写一个LoginController文件 3.加拦截器 1.创建一个conf…

推理加速:投机采样经典方法

一 SpecInfer 基于模型 SpecInfer&#xff08;[2305.09781] SpecInfer: Accelerating Generative Large Language Model Serving with Tree-based Speculative Inference and Verification&#xff09; SpecInfer 投机采样利用多个小型模型&#xff08;SSM&#xff09;快速生…

最好用的图文识别OCR -- PaddleOCR(1) 快速集成

最近在项目中遇到了 OCR 的需求&#xff0c;希望能够实现高效而准确的文字识别。由于预算限制&#xff0c;我并未选择商业付费方案&#xff0c;而是优先尝试了开源工具。一开始&#xff0c;我测试了 GOT-OCR2.0&#xff0c;但由于我的 Mac 配置较低&#xff0c;不支持 GPU 运算…

FFmpeg:详细安装教程与环境配置指南

FFmpeg 部署完整教程 在本篇博客中&#xff0c;我们将详细介绍如何下载并安装 FFmpeg&#xff0c;并将其添加到系统的环境变量中&#xff0c;以便在终端或命令行工具中直接调用。无论你是新手还是有一定基础的用户&#xff0c;这篇教程都能帮助你轻松完成 FFmpeg 的部署。 一、…

Spring SpEL表达式由浅入深

标题 前言概述功能使用字面值对象属性和方法变量引用#this 和 #root变量获取类的类型调用对象(类)的方法调用类构造器类型转换运算符赋值运算符条件(关系)表达式三元表达式Elvis 操作符逻辑运算instanceof 和 正则表达式的匹配操作符 安全导航操作员数组集合(Array 、List、Map…