vue中,基于vue-seamless-scroll的无缝滚动实例
1、安装vue-seamless-scroll
1 | npm install vue-seamless-scroll --save |
2、引入组件
1 2 3 4 5 6 7 | <vue-seamless-scroll></vue-seamless-scroll> import vueSeamlessScroll from 'vue-seamless-scroll' components: { vueSeamlessScroll }, |
3、配置参数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // 监听属性 类似于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) } } }, |
4、完整实例代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <!-- 文件描述:无缝滚动组件 创建时间:2020/4/10 18:32 创建人:Administrator --> <template> <div class = "" style= "padding: 50px;" > <div class = "page-example3" style= "" > <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> // 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等) // 例如:import 《组件名称》 from '《组件路径》'; // 例如:import uploadFile from '@/components/uploadFile/uploadFile' import vueSeamlessScroll from 'vue-seamless-scroll' export default { name: 'Example3' , // import引入的组件需要注入到对象中才能使用 components: { vueSeamlessScroll }, data() { // 这里存放数据 return { listData: [] } }, // 监听属性 类似于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) } } }, // 方法集合 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> |
5、运行效果
标签:
vue
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)