这篇文章主要介绍了基于Vue-seamless-scroll怎么实现无缝滚动效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇基于vue-seamless-scroll怎么实现无缝滚动效果文章都会有所收获,下面
这篇文章主要介绍了基于Vue-seamless-scroll怎么实现无缝滚动效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇基于vue-seamless-scroll怎么实现无缝滚动效果文章都会有所收获,下面我们一起来看看吧。
安装vue-seamless-scroll
npm install vue-seamless-scroll --save
引入组件
import scroll from 'vue-seamless-scroll'Vue.use(scroll)
组件局部引入
<vue-seamless-scroll></vue-seamless-scroll>import vueSeamlessScroll from 'vue-seamless-scroll'components: { vueSeamlessScroll},
配置参数
// 监听属性 类似于data概念computed: { defaultOption () { return { step: 0.2, // 数值越大速度滚动越快 limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length hoverStop: true, // 是否开启鼠标悬停stop direction: 1, // 0向下 1向上 2向左 3向右 openWatch: true, // 开启数据实时监控刷新dom singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 waitTime: 1000 // 单步运动停止的时间(默认值1000ms) } } },
完整实例代码
<template> <div class="" > <div class="page-example3" > <vue-seamless-scroll :data="listData" :class-option="defaultOption" > <ul class="ul-scoll"> <li v-for="(item, index) in listData" :key='index'> <span class="title">{{item.title}}:</span><span class="date">{{item.time}}</span> </li> </ul> </vue-seamless-scroll> </div> </div></template> <script> import vueSeamlessScroll from 'vue-seamless-scroll' export default { name: 'Example3', data() { // 这里存放数据 return { listData: [] } }, // import引入的组件需要注入到对象中才能使用 components: { vueSeamlessScroll }, // 监听属性 类似于data概念 computed: { defaultOption () { return { step: 1, // 数值越大速度滚动越快 limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length hoverStop: true, // 是否开启鼠标悬停stop direction: 1, // 0向下 1向上 2向左 3向右 openWatch: true, // 开启数据实时监控刷新dom singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 waitTime: 1000 // 单步运动停止的时间(默认值1000ms) } } }, // 方法集合 methods: {}, // 监控data中的数据变化 watch: {}, // 生命周期 - 创建完成(可以访问当前this实例) created() { }, // 生命周期 - 挂载完成(可以访问DOM元素) mounted() { for(let i = 0 ; i < 15 ; i++){ let j = { title:'无缝滚动第几条啊啊啊-'+i, time: '2020-04-10' } this.listData.push(j) } } }</script> <style scoped lang="sCSS"> //@import url(); 引入公共css类 .page-example3{ width: 400px; height: 200px; overflow: hidden; border: 1px solid #283Dff; .ul-scoll{ li{ margin: 6px; padding: 5px; background: rgba(198, 142, 226, 0.4); } } }</style>
关于“基于vue-seamless-scroll怎么实现无缝滚动效果”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“基于vue-seamless-scroll怎么实现无缝滚动效果”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网精选频道。
--结束END--
本文标题: 基于vue-seamless-scroll怎么实现无缝滚动效果
本文链接: https://www.lsjlt.com/news/326605.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0