vue无缝滚动广告插件使用

//安装
npm install vue-seamless-scroll --save

//然后在main.js文件里面引入使用:
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

在页面使用参考地址: https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default

运用此插件监听按钮点击内容只能通过兄弟元素的滚动距离来监听
写法类似下面的

var a = document.getElementsByClassName('seamless-warp')[0].firstElementChild;
				var str = window.getComputedStyle(a).transform;
				var index = str.lastIndexOf("\-");
				var index2 = str.lastIndexOf("\)");
				str=str.substring(index+1,index2);
				str = Number(str);
				console.log(str)
				if(str==0||str==60||str==120){
					this.$router.push({
						path: 'annunciate',
						query: {
							id: 2
						}
					})
				}else if(str==20||str==80){
					this.$router.push({
						path: 'annunciate',
						query: {
							id: 1
						}
					})
				}else{
					this.$router.push({
						path: 'annunciate',
						query: {
							id: 0
						}
					})
				}

你可能感兴趣的:(前端,vue)