Vue实现横向无缝滚动 |
您所在的位置：网站首页 › 无限循环图片 › Vue实现横向无缝滚动 |
Vue实现横向无缝滚动
|
需求描述
需要实现一个信息条横向无缝滚动，鼠标移上停止滚动移开继续滚动的效果如下图，
本着高效开发的目的，第一步自然是去找有没有合适现成的轮子就直接用了。果然vue-seamless-scroll就能完美实现以上要求。于是封装了一个基于vue-seamless-scroll的信息横向无缝滚动组件 安装vue-seamless-scroll npm install vue-seamless-scroll -S新建marqueex.vue 组件并引入vue-seamless-scroll html部分 最新资讯： {{ item }}引入部分 import vueSeamlessScroll from 'vue-seamless-scroll' components: { vueSeamlessScroll },配置参数部分 computed: { optionLeft() { return { step:0.8, direction: 2,// 0向下 1向上 2向左 3向右 // limitMoveNum: this.dataList.length,// 开始无缝滚动的数据量 this.dataList.length hoverStop: true, openTouch: false, }; }, }, |
【本文地址】
今日新闻 |
推荐新闻 |