nuxt + vue-seamless-scroll实现文字滚动

nuxt + vue-seamless-scroll实现文字滚动

注意：nuxt的话 直接使用的话 会报undefined的 所以需要使用 client-only包裹住

步骤一、 下载依赖

npm install vue-seamless-scroll --save

步骤二 、 在plugins下 新建 vue-seamless-scroll.js文件

import Vue from 'vue';
import infiniteScroll from 'vue-infinte-scroll';
export default () => {
  Vue.use(infinteScroll)
  }

步骤三 、在nuxt.config.js文件中引入

plugins:[
 {src:"@/plugins/vue-seamless-scroll", ssr:false}
]

步骤四、 页面中使用

1.template中

 <client-only>
    <vue-seamless-scroll :data="newSoftwareArticle" :class-option="scrollOption">
     ...页面中的数据部分
     </vue-seamless-scroll>
  </client-only>   

2.data中定义一个数组 newSoftwareArticle:[ ]

3.使用计算属性写配置项

computed:{
  return{
	step:0.2, // 数值越大滚动越快
	limitMoveNum:6, //开启无缝滚动的数据量
	hoverStop:true, //是否启用鼠标hover控制
	direction:1, //方向 0 往下 1 往上 2向左 3向右
	openTouch:true, //移动端开启touch滑动
	singleHeight:0, //单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
    singleWidth:0, //单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3	
    waitTime:1000, //单步停止等待时间(默认值1000ms)
  }
}

📢没了，结束了，如有错误，欢迎留言.如有问题，不吝赐教。
📢如果此篇博文对您有帮助，还请动动小手点赞 👍 收藏 ⭐留言 📝呐~，谢谢 ~ ~