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…

题解:A. Noldbach Problem

问题描述 Nick 对素数非常感兴趣。他阅读了有关 Goldbach Problem 的内容&#xff0c;了解到每个大于 2 的偶数都可以表示为两个素数的和。于是他决定创造一个新问题&#xff0c;称为 Noldbach Problem。 Noldbach 问题的定义如下&#xff1a; 如果一个素数 $p$ 满足&#x…

latex技巧

latex技巧 1. LaTeX 中设置表格的字体大小 在 LaTeX 中设置表格的字体大小可以通过多种方式实现。以下是一些常见的方法&#xff1a; 方法一&#xff1a;使用 \small, \footnotesize, \scriptsize 等命令 你可以在表格环境中直接使用这些命令来设置字体大小。例如&#xff1…

第1章 微型计算机接口技术基础

接口的功能特点 寻址功能 确定数据应发送到哪个特定设备或内存位置的功能。通过寻址&#xff0c;接口可以确保数据正确无误地到达其目的地。 输入/输出功能 使接口可以从一个设备读取数据(输入)并将数据发送到另一个设备(输出)。 数据缓冲功能 为了平衡两个不同速度的设备之间…

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

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

Java反射详解(三)

上一篇博客&#xff1a;Java反射详解&#xff08;二&#xff09; 写在前面&#xff1a;大家好&#xff01;我是晴空๓。如果博客中有不足或者的错误的地方欢迎在评论区或者私信我指正&#xff0c;感谢大家的不吝赐教。我的唯一博客更新地址是&#xff1a;https://ac-fun.blog.c…

机器学习随机森林回归模型数据预处理中归一化或者标准化

一、归一化的定义与特点 1.定义 将数据按比例缩放&#xff0c;使其落入一个小的特定区间&#xff0c;通常是[0, 1]。 2.特点 &#xff08;1&#xff09;保持数据间的比例关系。 &#xff08;2&#xff09;对极端值敏感&#xff0c;如果数据中存在极端值&#xff0c;所有数据都…

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

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

k8s系列--docker拉取镜像导入k8s的containerd中

# 确认一下当前集群中正在运行的 Pod 和命名空间 kubectl get pods -A# 示例一&#xff1a;拉取并导入 CoreDNS 镜像 docker pull registry.cn-hangzhou.aliyuncs.com/google_containers/coredns:v1.11.1 docker save registry.cn-hangzhou.aliyuncs.com/google_containers/cor…

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…

机器学习策略Ⅱ

机器学习策略Ⅱ 误差分析 在训练算法的时候&#xff0c;可以通过人工检查算法在开发集或测试集上的错误&#xff0c;分析错误类型&#xff0c;来识别值得优先解决的问题。这样子可以帮助开发者确定哪些方向有最大的性能改进空间&#xff0c;避免将大量时间浪费在影响较小的错误…

logback之配置文件使用详解

目录 &#xff08;一&#xff09;配置文件的加载 &#xff08;二&#xff09;使用介绍 1、configuration&#xff1a;配置文件的跟元素 2、contextName&#xff1a;设置日志上下文名称 3、contextListener&#xff1a;设置上下文监听事件 4、property/variable/substituti…

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

文&#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…

单片机常用外设开发流程(1)(IMX6ULL为例)

1.通过GPIO引脚控制led灯和key按钮 &#xff08;1&#xff09;设置多路复用的引脚&#xff08;SW_MUX_CTL&#xff09;也可以说是选择让引脚以哪种工作模式工作 &#xff08;2&#xff09;设置电器属性&#xff08;SW_PAD_CTL&#xff09;上拉、等等... (3)设置GPIO的方向&am…

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…